只需要把下面代码放到js中:

$(function(){       
        //获取要定位元素距离浏览器顶部的距离
        var navH = $(".menu").offset().top;
        //滚动条事件
        $(window).scroll(function(){
                //获取滚动条的滑动距离
                var scroH = $(this).scrollTop();
                //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
                if(scroH>=navH){
                        $(".menu").css({"position":"fixed","top":0,"left":0});
                }else if(scroH<navH){
                        $(".menu").css({"position":"static","margin":"0 auto"});
                }
                console.log(scroH==navH);
        })
})
上面的.menu是菜单栏的class

然后引入jquery.min.js即可

JS 菜单栏一直悬浮在顶部代码的更多相关文章

  1. js让菜单栏一直悬浮在顶部,经典代码

    js让菜单栏一直悬浮在顶部,经典代码 很简单,你只需要把下面代码放到js中:$(function(){                //获取要定位元素距离浏览器顶部的距离        var na ...

  2. 菜单栏始终浮动在顶部 js

    //菜单栏始终浮动在顶部var navH = $(".trade-tab-bot").offset().top;//获取要定位元素距离浏览器顶部的距离//滚动条事件$(window ...

  3. js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  4. qq空间返回顶部代码

    点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. 兼容IE,chrome 等所有浏览器 回到顶部代码

    今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了. 故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行. 主要实现功能代码文件: & ...

  6. JS--回到顶部代码

    原文地址:http://www.cnblogs.com/liguiqiang1986/articles/3132023.html JS--回到顶部代码 <!DOCTYPE html PUBLIC ...

  7. 基于jquery右侧悬浮加入购物车代码

    分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览   源码下载 实现的代码: <!--左侧产品parabola.js控制 ...

  8. jQuery火箭图标返回顶部代码

    在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  9. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

随机推荐

  1. Mabitis 多表查询(一)resultType=“java.util.hashMap”

    1.进行单表查询的时候,xml标签的写法如下 进行多表查询,且无确定返回类型时 xml标签写法如下: <select id="Volume" parameterType=&q ...

  2. hessian不能注入dao的问题解决

    天天卡,写个程序很费劲,不是卡这儿就是卡那里,一天天的不出活,周六日费时间都在这上面了. 问题:hessian能调通,就是不能操作数据库,userDao不能注入,为null,期初以为是实体类赋值的问题 ...

  3. 过滤HTML代码

    public static string FilterHtml(string string_include_html) { string[] HtmlRegexArr ={ #region Html ...

  4. python 面向对象学习

    ------Python面向对象初 下面写一个类的简单实用,以便方便理解类 #python 3.5环境,解释器在linux需要改变 #阅读手册查询readme文件 #作者:S12-陈金彭 class ...

  5. 为什么学习Ruby On Rails:

    简单总结了一下自己为什么喜欢ruby on rails: 语法简单,写代码很愉快,比较接近伪代码: 喜欢其强大的正则表达式和字符串操作. ruby中面向对象更自由,更动态: ruby给人信任,相信你了 ...

  6. 用C#开发了四天的UWP应用有感

    第一个就是异步方法,async-await,所谓async关键字,并没有什么实际上的语法意义,只是写在函数签名的位置让编译器方便进行查找以及静态检查,并且提醒程序员这是一个异步方法而已.至于await ...

  7. python遍历删除列表的方法

    for item in list(somelist): somelist.remove(item)

  8. 大众点评试题分析(C/C++)

    1.main函数执行完毕,从栈中弹出操作函数 void fn1(void), fn2(void), fn3(void); int main() { atexit(fn3); atexit(fn1); ...

  9. zedboard如何从PL端控制DDR读写(六)

    上一节说到了DDR寻址的问题,如下图: 从官方文档上我们看到了DDR的地址是从0008_0000开始的,那么我们开始修改Xilinx给我们提供的IP核代码.其实很简单,上一节已经分析了地址停留在000 ...

  10. 登陆mysql时出现unknown variable 'character_set_client=UTF8' 的错误

    今天,登陆数据库服务器的时候,出现了下面的错误: [root@localhost app]# mysql -uroot -p mysql: unknown variable 'character-se ...