//菜单栏始终浮动在顶部
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":102, "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让菜单栏一直悬浮在顶部,经典代码 很简单,你只需要把下面代码放到js中:$(function(){                //获取要定位元素距离浏览器顶部的距离        var na ...

  2. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  3. jQuery 顶部导航尾随滚动,固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  4. 弹性返回顶部JS代码

    弹性返回顶部JS代码 弹性返回顶部JS代码点击下载

  5. 手机端网页返回顶部js代码

    <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" cont ...

  6. 一段简单的顶部JS广告

    一段简单的顶部JS广告 <SCRIPT LANGUAGE="JavaScript"> ; ; images = new Array; images[] = new Im ...

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

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

  8. gotoTop返回顶部 JS

    方法: 1.首先在body添加一个标签,在一个页面添加,其它页面也会生效. <body> <a name="top"> 2.然后在页脚添加一个链接 < ...

  9. 返回顶部js

    backToTop.js: (function () { var $backToTopEle = $('<div class="backToTop"></div& ...

随机推荐

  1. css10定位属性

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 各种乱码,编码问题设置方法整理(UTF-8)

    一.tomcat中文乱码问题 打开tomcat安装目录,在conf文件夹中找到server.xml文件 ,找到   <Connector port="8009" protoc ...

  3. 数据库连接超时和go away、如何检测数据库的最大连接数

    搜索连接bi库超时 数据库连接超时 go away go away和连接超时之间的关系是什么? 写一个例子测试一下. 如何检测数据库的最大连接数

  4. 保障MySQL安全的14个最佳方法

    MySQL数据库一贯以高性能.高可性和易用性著称,它已经成为世界上最流行的开源数据库.大量的个人.WEB开发者.大型公司等都在其网站.关键系统.软件包中广泛使用MySQL数据库.        通常, ...

  5. 1202.2——Xcode部分快捷键

    Ctrl+N(Next)  光标跳到下一行 Ctrl+P(Previous)   光标跳到上一行 Ctrl+B(Back) 光标向左边移动一个字符 Ctrl+F(Forward)   光标向右边移动一 ...

  6. oracle PL/SQL程序设计

    declare 说明部分    (变量说明,光标申明,例外说明 ] begin 语句序列   (DML语句]… exception 例外处理语句 End; /

  7. JNDI--Java命名和目录接口

    JNDI主要用于在容器中配置某些资源,让所有项目可以使用.JNDI可以提供: 1:数据库连接池.            自定义连接池             第三方连接池 Dbcp           ...

  8. [置顶] 让你的Android应用与外部元素互动起来

    传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229 一个Android应用程序通常有几个activities.每个act显示一个用户接口允 ...

  9. thrift之TTransport类体系原理及源码详细解析1-类结构和抽象基类

    本章主要介绍Thrift的传输层功能的实现,传输的方式多种多样,可以采用压缩.分帧等,而这些功能的实现都是相互独立,和上一章介绍的协议类实现方式比较雷同,还是先看看这部分的类关系图,如下: 由上面的类 ...

  10. GetWindowText

    用于得到窗口中的数据 {// TODO: If this is a RICHEDIT control, the control will not// send this notification un ...