只需要把下面代码放到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. 微信公众平台开发教程(八)Session处理

    微信公众平台开发教程(八)Session处理 在微信窗口,输入的信息有限,我们需要将一些信息分多次请求. 比如:在进行用户绑定时,我们需要输入用户的相关信息,比如:用户名.密码,或者姓名.电话号码,服 ...

  2. 异步等待(ManualResetEvent

    ManualResetEvent实现异步等待,超过时间 不做处理,继续往下执行代码 (ManualResetEvent 涉及一个线程在其他线程进行之前必须完成的任务) ManualResetEvent ...

  3. 一台机器运行多个JBoss 4.2.3多实例,或多个同一版

    http://www.java123.net/v/426419.html     暂未验证 今天应用更新,放到测试服务器上打算测试.测试服务器上有个jboss4.2.3有项目在跑,我是功能改造又不想影 ...

  4. API接口验证

    一.前言 权限验证在开发中是经常遇到的,通常也是封装好的模块,如果我们是使用者,通常指需要一个标记特性或者配置一下就可以完成,但实际里面还是有许多东西值得我们去探究.有时候我们也会用一些开源的权限验证 ...

  5. PLSQL 逻辑多线程

    PROCEDURE get_sheetid(i_topic IN VARCHAR2, o_newsheetid OUT VARCHAR2) IS    PRAGMA AUTONOMOUS_TRANSA ...

  6. 【转】C# 使用消息队列,包括远程访问

    出处:http://www.cnblogs.com/80X86/p/5557801.html 近期做一个小的功能需求,用到了队列,用的时候出了很多问题,现在总结一下,希望能对有需要的人提供帮助. 我的 ...

  7. yum 部署nginx

    第一步,在/etc/yum.repos.d/目录下创建一个源配置文件nginx.repo: cd /etc/yum.repos.d/ vim nginx.repo   填写如下内容:   [nginx ...

  8. (DP)3.Longest Substring Without Repeating Characters

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  9. JS中数组Array的用法

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了. var arr = new Array();  // 初始化数组arr[0] = "aaa";arr[1] = ...

  10. C#_GDI+详细教程(图形图像编程基础)

    第7章  C#图形图像编程基础 本章主要介绍使用C#进行图形图像编程基础,其中包括GDI+绘图基础.C#图像处理基础以及简单的图像处理技术. 7.1  GDI+绘图基础 编写图形程序时需要使用GDI( ...