只需要把下面代码放到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. Python numpy函数hstack() vstack() stack() dstack() vsplit() concatenate()

    感觉numpy.hstack()和numpy.column_stack()函数略有相似,numpy.vstack()与numpy.row_stack()函数也是挺像的. stackoverflow上也 ...

  2. Sedgewick的红黑树

    红黑树一直是数据结构中的难点,大部分关于算法与数据结构的学习资料(包括<算法导论>)对于这部分的讲解都是上来就下定义,告诉我们红黑树这个性质那个性质,插入删除要注意1234点,但是基本没有 ...

  3. 8、java继承中的this和super的应用

    java中只支持单继承,这是为了防止继承的父类中出现同样的函数不知道调用哪个好.虽然java只支持单继承但是有多实现来补偿. 子父类出现后,类成员的特点: 类中成员:1,变量.2,函数.3,构造函数. ...

  4. Silverlight管理系统源码(用于开发ERP、OA、CRM、HR、进销存、财务等系统之用)

    Silverlight大型管理系统源代码(支持创建ERP.OA.CRM.HR.进销存.财务等系统之用) 可用于开发以下系统 SilverlightERP SilverlightCRM Silverli ...

  5. Linux系统性能和使用活动监控工具 sysstat

    Sysstat是一个非常方便的工具,它带有众多的系统资源监控工具,用于监控系统的性能和使用情况.我们在日常使用的工具中有相当一部分是来自sysstat工具包的.同时,它还提供了一种使用cron表达式来 ...

  6. python学习-day18、文件处理、

    4.文件操作 武sir:http://www.cnblogs.com/wupeiqi/articles/4943406.html 林海峰:http://www.cnblogs.com/linhaife ...

  7. 黄聪:wordpress向一个页面POST数据,出现404页面访问不了

    出现这个情况,说明POST的数据中存在一些关键词,触发调用了page以外的模版.比如POST数据中有 name , author 等参数. 解决办法,就是把这些参数改一下名称.

  8. sql server 2008 r2 报错

    无法启动服务,要求检查数据库和windows日志 查看发现报错 The SQL Server failed to initialize VIA support library [QLVipl.dll] ...

  9. bootstrap-图文混排 media

    <!-- media 图文混排 media-left(right) 图片的区域 在左边显示(右边) media-body 内容区域 media-heading 内容区域里的标题 media-mi ...

  10. Blackfin DSP(七):用SPORT口模拟SPI

    1.问题的提出 当系统从SPI device启动时,若SCLK = 133M,则SPI的最大速度为33M.然而,有一些串行的flash设备能更快的运行,因此,如果我们使用SPORT口,它的最大速度为S ...