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. LA 6448 Credit Card Payment

      [题目] 你的信用卡目前欠M元,每月的汇率是R,每月的利息要四舍五入为小数点后两位,你每月还B元,问多少月能还清. 输入 先是T代表测试数据组数 接下来T行,每行有三个实数,R,M,B每个实数小数 ...

  2. SpringMVC06以对象的方式获取前台的数据

    ========创建需要的两个实体类================ public class School { private String sName; private String addres ...

  3. sql Server 常用存储过程的优化

    优化存储过程有很多种方法,下面介绍最常用的7种. 1.使用SET NOCOUNT ON选项 我们使用SELECT语句时,除了返回对应的结果集外,还会返回相应的影响行数.使用SET NOCOUNT ON ...

  4. (转)\r \r\n \t 的区别

    小风吹雪 \r \r\n \t 的区别 http://www.360doc.com/content/12/0530/15/16538_214756101.shtml \n 软回车:       在Wi ...

  5. (转)__dopostback的用法 .

          在.NET中,所有的服务器控件提交到服务器的时候,都会调用__doPostBack这个函数,所以灵活运用这个函数对于我们的帮助还是很大的. 比如,在我们写程序的时候经常会需要动态的生成一些 ...

  6. 什么是DNN,Dotnetnuke介绍和功能简介

    1. What is DNN? DNN是DotNetNuke(DotNet)的简写.它是在IBUYSPY(IBUYSPY是微软用来推广ASP.NET而推出的范例程序)的基础上发展起来的,是一个免费的. ...

  7. android获取在res文件下的图片资源

    //得到该图片的id(name 是该图片的名字,"drawable" 是该图片存放的目录,getPackageName()是应用程序的包) int resID = getResou ...

  8. java静态代码块 类加载顺序问题。

    class B extends Object { static {System.out.println("Load B");} public B(){System.out.prin ...

  9. Windows服务器之间rsync同步文件

    两台windows7机器 server:192.168.12.104 client:192.168.12.103 目的:将server上的E盘的目录FYFR里面的内容定时同步到client上的D盘下F ...

  10. libthrift0.9.0解析(二)之TSimpleServer

    TSimpleServer简单实现Tserver,代码如下. /** * Simple singlethreaded server for testing. * */ public class TSi ...