js让菜单栏一直悬浮在顶部,经典代码

很简单,你只需要把下面代码放到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即可

eg:

//菜单栏始终浮动在顶部
var navH = $(".trade-tab-bot").offset().top;//获取要定位元素距离浏览器顶部的距离
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
$(".trade-tab-bot").css({"position":"fixed","top":0,"left":0, "z-index":1000, "margin":"0 auto", "width":"100%"});
}else if(scroH<navH){
$(".trade-tab-bot").css({"position":"relative","margin":"0 auto"});
}
console.log(scroH==navH);
});

js让菜单栏一直悬浮在顶部,经典代码的更多相关文章

  1. JS 菜单栏一直悬浮在顶部代码

    只需要把下面代码放到js中: $(function(){                //获取要定位元素距离浏览器顶部的距离         var navH = $(".menu&quo ...

  2. 网站JS控制的QQ悬浮

    这是一个网站JS控制的QQ悬浮客服:代码1document.writeln("<div id=\"feedback\"><div id=\"f ...

  3. 菜单栏始终浮动在顶部 js

    //菜单栏始终浮动在顶部var navH = $(".trade-tab-bot").offset().top;//获取要定位元素距离浏览器顶部的距离//滚动条事件$(window ...

  4. 【JS中循环嵌套常见的六大经典例题+六大图形题,你知道哪几个?】

    首先,了解一下循环嵌套的特点:外层循环转一次,内层循环转一圈. 在上一篇随笔中详细介绍了JS中的分支结构和循环结构,我们来简单的回顾一下For循环结构: 1.for循环有三个表达式,分别为: ①定义循 ...

  5. JS实现复制网页内容自动加入版权内容代码和原文链接

    JS实现复制网页内容自动加入版权内容代码和原文链接 实现代码:在body内放入如下代码即可: <script type="text/javascript"> var S ...

  6. Js设置所有连接是触发/swt/的代码

    Js设置所有连接是触发/swt/的代码 代码为: <script> var doca=document.getElementsByTagName('a'); for(var i=0;i&l ...

  7. 一段JS控制TD中图片的大小的代码

    一段JS控制TD中图片的大小的代码 <table><tr><td id="otd"><div></div><img ...

  8. js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  9. js正则实现从一段复杂html代码字符串中匹配并处理特定信息

    js正则实现从一段复杂html代码字符串中匹配并处理特定信息 问题: 现在要从一个复杂的html代码字符串(包含各种html标签,数字.中文等信息)中找到某一段特别的信息(被一对“|”包裹着),并对他 ...

随机推荐

  1. js中String对象

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. 顺序表JAVA代码

        publicclassSeqList{       final int defaultSize =10;     //默认的顺序表的最大长度     int maxSize;          ...

  3. HDU 1199 - Color the Ball 离散化

    [题意]现在有几个球排成一排,编号从1开始,开始时所有球为黑色,现在有n(<=2000)次操作,每次操作将l[i]至r[i](均在int范围)的球凃成颜色c[i](黑色'b'或白色'w'),然后 ...

  4. mongodb入门教程二

    title: mongodb入门教程二 date: 2016-04-07 10:33:02 tags: --- 上一篇文章说了mongodb最基本的东西,这边博文就在深入一点,说一下mongo的一些高 ...

  5. animation-timing-function中的cubic-bezier(n,n,n,n)

    cubic-bezier即为贝兹曲线中的绘制方法.图上有四点,P0-3,其中P0.P3是默认的点,对应了[0,0], [1,1].而剩下的P1.P2两点则是我们通过cubic-bezier()自定义的 ...

  6. spring-junit的标注总结

    如果在测试类的类名上面添加了注解 @ContextConfiguration("meta/springConfigured.xml") 如何在标注了@Test的方法里面获取上面xm ...

  7. linux的exec命令

    linux的exec命令可以多进程执行,如果在浏览器访问使用http协议,会存在内存溢出和执行时间问题.

  8. PHP输出中文乱码的问题(转)

    用echo输出的中文显示成乱码, 其实应该是各种服务器脚本都会遇到这个问题, 根本还是编码问题, 一般来说出于编码兼容考虑大多的页面都将页面字符集定义为utf-8 <meta http-equi ...

  9. 有关Ajax实现的两种方法

    首先我们来常见的Jquery式的Ajax写法,以及在java后台的取值 /** *AJAX */ function showLastTime(){ var facilityId = $('*[name ...

  10. KVM virt-manager使用.

    本来不想写,但是觉得教程就应该详细点..所以又有了这篇文章..主要是对图形化kvm管理的一些说明 接着上一篇... 1.Virtual Machine Manager 摘要: 打开Virtual Ma ...