只需要把下面代码放到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. Google 的开源技术protobuf 简介与例子

    本文来自CSDN博客:http://blog.csdn.NET/program_think/archive/2009/05/31/4229773.aspx 今天来介绍一下"Protocol  ...

  2. iTextSharp 使用详解(转)

    PDF文件是目前比较流行的电子文档格式,在办公自动化(OA)等软件的开发中,经常要用到该格式,但介绍如何制作PDF格式文件的资料非常少,在网上搜来搜去,都转贴的是同一段“暴力”破解的方法,代码片断如下 ...

  3. linux下socket编程-进程间通信

    一.什么是Socket Socket接口是TCP/IP网络通信的API,Socket接口定义了许多函数或例程,可以用它们来开发TCP/IP网络上的应用程序. Socket类型有两种:流式Socket ...

  4. 一个服务器上面配置多个IP ,实现指定IP的域名请求

    //配置多个IP命名using System.Net; //********************************************************************** ...

  5. ruby中http请求方法整理

    #POST请求 请求包是json包 返回body并转换成json对象def post_json *args uri = URI.parse args[0] req = Net::HTTP::Post. ...

  6. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  7. CodeVS 数轴染色

    #include<cstdio> #include<algorithm> using namespace std; #define lson rt<<1 #defi ...

  8. ssh 协议执行repo sync 报错:Permission denied (publickey)

    1.ssh key 已经添加ssh key到gerrit服务器,并且执行ssh协议的git clone可以正常克隆代码到本地,可见不是ssh key的问题. 2.manifest清单文件配置 最初在m ...

  9. 查询数组里有多少个数在[L,R]范围中(二分)

    使用两次二分即可得到这个值 比如现在有一个vector<int> vec,里面存放的是有序数列. 我们现在希望找出范围在[L,R]之间的数有多少个. 则有cnt = upper_bound ...

  10. 【转】JVM内存模型

    http://longdick.iteye.com/blog/473866 图解JVM内存模型 博客分类: JVM JVM活动SUN  /** *  转载请注明作者longdick    http:/ ...