//菜单栏始终浮动在顶部
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. nyoj 17

    // nyoj 17        代码如上,用的是dp,总的来说就是对一个字符串 从末尾开始比较,设定一个数组,存放每个单调字串的最大长度,最后比较... //要注意的就是里面if语句对于每次字符比 ...

  2. SQL 查询字段为值不为空

      方法一sql="select   *   from   table   where   id<>null   "     or   sql="select ...

  3. 使用Application_Error捕获站点错误并写日志

    Global.ascx页面使用以下方法即可捕获应用层没有try cath的错误 protected void Application_Error(Object sender, EventArgs e) ...

  4. java实现字符串反转(原作有点错误,需要看下评论)

    http://blog.csdn.net/shenshen123jun/article/details/9104025

  5. 1202.2——Xcode部分快捷键

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

  6. iOS9.3 Could not find Developer Disk Image 真机调试错误解决办法

    昨天手机系统升级9.3,到了公司真机测试的时候发现Xcode(7.2.1)报错:Could not find Developer Disk Image , 这是因为我的Xcode7.2中还没有支持9. ...

  7. SQL 无法打开物理文件 XXX.mdf",操作系统错误 5:"5(拒绝访问。)"

    用T-SQL命令附加数据库时,出现如下异常信息: 无法打开物理文件 XXX.mdf".操作系统错误 5:"5(拒绝访问.)". (Microsoft SQL Server ...

  8. ajax上传文件进度条

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 使用nw.js将html项目打包为桌面程序

    首先需要确保电脑已经布置好node.js环境 1.下载并全局安装nw.js npm install nw -g 2.安装nw-builder模块 npm install nw-builder -g 3 ...

  10. 武汉科技大学ACM:1005: 单位转换

    Problem Description BobLee最近在复习考研,在复习计算 机组成原理的时候,遇到了一个问题.就是在计算机存储里面的单位转换.我们都知道1MB=1024KB,1KB=1024B,1 ...