只需要把下面代码放到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】类的访问限制

    在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑. 但是,从前面Student类的定义来看,外部代码还是可以自由地修改一个实例的na ...

  2. [zz] 英文大写缩写前要加THE吗

    http://zhidao.baidu.com/link?url=BvXRdoE0OjGh46rlodbyM3wirORSGGcnYGq0xYEtcoIMTkLnXd4Hl3iMLbKNb2npRdI ...

  3. Difference between applicationContext.xml and spring-servlet.xml in Spring Framework

    Question: Are applicationContext.xml and spring-servlet.xml related anyhow in Spring Framework? Will ...

  4. H5 App开发用WeX5垃圾 试用一周,我果断放弃了wex5

    上个月,和朋友一起参加wex5的分享会,因为对cordova有些了解,始终不相信wex5的广告.五一假期,小试一下,果然不出我所料,有不少坑. 想下载IDE,竟然有1.7G,虽然现在网速快但是文件太大 ...

  5. java io流 对文件操作

    检查文件是否存在 获取文件路径 获取文件大小 ...... 更多参考手册 //对文件的操作 //检查文件是否存在 //获取文件路径 //获取文件大小 //文件是否可读 //文件是否可写 //.... ...

  6. java io流(字节流)复制文件

    java io流(字节流) 复制文件 //复制文件 //使用字节流 //复制文本文件用字符流,复制其它格式文件用字节流 import java.io.*; public class Index{ pu ...

  7. eclipse下tomcat插件配置说明

  8. Android主流UI开源库整理(转载)

    http://www.jianshu.com/p/47a4a7b99364 标题隐含了两个层面的意思,一个是主流,另一个是UI.主流既通用,一些常规的按钮.Switch.进度条等控件都是通用控件,因此 ...

  9. AX 2012 Form and Parts

    在AX 2012 中系统标准FORM 中绝大部分都应用parts,form 和parts 是不可分开. 说到底parts到底是什么呢? Parts :我个人理解是为了在一个form中的显示更多信息而存 ...

  10. win32手动创建windows窗口的,小记

    摘抄自文档,其中的函数需要以后花时间看 向 WinMain 添加功能 首先,在 WinMain 函数内部创建 WNDCLASSEX 类型的窗口类结构. 此结构包含有关窗口的信息,如应用程序图标.窗口的 ...