//菜单栏始终浮动在顶部
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. nginx 3.nginx+fastcgi

    死磕nginx 3.nginx+fastcgi 互联网服务器有个非常典型的架构lamp(linux+apache+mysql+php),由于其开源和强大的兼容性而风靡一时,不过随着nginx的横空出世 ...

  2. eclipse中svn版本不兼容问题

    eclipse中导入本地svn管理的Android项目 使用svn时弹出以下提示: org.apache.subversion.javahl.ClientException: Unsupported ...

  3. fastUtils学习

    比传统java集合工具类速度更快 google的guava也新增了java容器新的功能,功能更加强大,参考文档:http://www.ibm.com/developerworks/cn/java/j- ...

  4. 向ASP.NET服务器控件中嵌入CSS资源

    Step1:于[项目解决方案]中右键新建[ASP.NET服务器控件]项目 Step2:于项目中添加[Resources]文件夹,于该文件夹下添加[CSS文件] Step3:单击该CSS文件,并将[属性 ...

  5. (转)SVN详解

    原文地址:http://www.weixingon.com/s/visualsvn+%E4%B8%AD%E6%96%87 1.几种代理管理工具的适用场景 A.如果你的项目是5-6人的小团队,那么使用V ...

  6. WPF 打开文件 打开路径对话框

    WPF调用WinForm中的 OpenFileDialog 和 FolderBrowserDialog 来实现响应的功能 对应的引用程序集: using System.Windows.Forms; O ...

  7. cocoapods出现Diff: /../Podfile.lock: No such file or directory错误

    第一种解决方法: 关闭Xcode,重新执行pod install,之后再重新打开Xcode运行. 第二种解决方法: 删除以下文件: xcworkspacePodfile.lockPods文件夹~/Li ...

  8. 《Linux内核分析》 week2作业-时间片轮转

    一.基于时间片轮转调度代码的解读 代码结构主要由三个文件组成: 1.mypcb.h 2.myinterrupt.c 3.mymain.c 1.进程控制块(mypcb.h) /* CPU-specifi ...

  9. 删除所有ecshop版权和logo

    前面我们已经讲过如何删除ecshop的版权,但是还有很多人不会,今天就详细的讲下如何删除所有ecshop版权和logo 前台部分: 1:去掉头部TITLE部分的ECSHOP演示站 Powered by ...

  10. sublime在Mac osx下安装z-codeing(即emmet)

    sublime安装插件可以根据插件名称通过package control就可以很方便的安装好.但是sublime没有默认安装package control,所以我们必须先安装它. 安装package ...