只需要把下面代码放到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. Func<T,T>应用之Elasticsearch查询语句构造器的开发

    前言 之前项目中做Elasticsearch相关开发的时候,虽然借助了第三方的组件PlainElastic.Net,但是由于当时不熟悉用法,而选择了自己拼接查询语句.例如: string queryG ...

  2. intellij idea使用配置jetty maven 插件

    pom.xml中更改或则添加: <build> <finalName>mall</finalName> <plugins> <plugin> ...

  3. Window环境下 Git 下载Android源码

    1.需要的工具 git.vpn代理 2. 设置git代理(Google source 无法下载,git设置代理) git config --global http.proxy "localh ...

  4. PHP中float变量转换为int时,结果有误的问题!

    先上例子: <?php $money = 100; $rate = 1.15; $result = $money * $rate; var_dump( intval( $result ) ); ...

  5. java为什么要设置环境变量

    1. PATH环境变量.作用是指定命令搜索路径,在shell下面执行命令时,它会到PATH变量所指定的路径中查找看是否能找到相 应的命令程序.我们需要把 jdk安装目录下的bin目录增加到现有的PAT ...

  6. 怎么取消 Windows Server 2012 r2 RDP 限制每个用户只能进行一个会话(转)

    在 Windows Server 2008 / 2008 R2 上,如果希望多个远程用户使用同一个账号同时访问服务器的 Remote Desktop(RDP),只需通过管理工具-远程桌面下的“远程桌面 ...

  7. C#字符操作

    //字符串转ASCII码 // str1:字符串 str2:ASCII码 ] })[] == )//判断输入是否为字母 { str2= Encoding.GetEncoding(].ToString( ...

  8. Ubuntu-tomcat7目录

    ubuntu下通过apt-get install tomcat7方式安装的tomcat目录分布如下,做个记录: user@myserver:/var/lib/tomcat7$ ls -lttotal ...

  9. 高亮代码显示之HTML困惑

    近期做样式库,需要将HTML代码高亮,开始寻找相关的插件. 看到highlight.js,看到它主题样式如此之多,支持语言也如此之多,以为找到了神器.不想这只是痛苦的开始,为了让它支持HTML,我尝试 ...

  10. js获取浏览器语言(ie、ff、chrome)、contextpath

    /js获取浏览器语言(ie.ff.chrome) var language_en_us = "en-us"; var language_zh_cn = "zh-cn&qu ...