//菜单栏始终浮动在顶部
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. ShareSDK 社会化分享 集成步骤

    第一步 :获取ShareSDK 官网:http://www.mob.com 完整的集成文档:http://wiki.mob.com/android-sharesdk%E5%AE%8C%E6%95%B4 ...

  2. repeater 分页显示数据

    表名:ChinaStates 控件:Repeater 查询代码DA: public class ChinaStatesDA { private DataClassesDataContext Conte ...

  3. Hyper-V虚拟机和主机的网络配置

    Hyper-V虚拟机和主机的网络配置 方式1.共享式 这种方式是将Hyper-V内部的虚拟网络与外部网络共享.使得内部是一个私有的网络.属于NAT的类型.(不知道这么说对不对) 优点: 相对来说属于私 ...

  4. HTML中常用鼠标样式

    语法:cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not ...

  5. mssql 2008 失败 需要重新启动计算机 的解决办法

    大致出错信息如下:RebootRequiredCheck 检查是否需要挂起计算机重新启动.挂起重新启动会导致安装程序失败. 失败 需要重新启动计算机.必须重新启动计算机才能安装 SQL Server. ...

  6. ionic开发环境搭建

    Advanced HTML5 mobile development framework and SDK. Build incredible mobile apps with web technolog ...

  7. geotools导入shp文件到Oracle数据库时表名带下划线的问题解决

    问题: 最近在做利用geotools导入shp文件到Oracle表中,发现一个问题Oracle表名带下划线时导入失败,问题代码行: dsOracle.getFeatureWriterAppend(or ...

  8. JAVA-2-DATA

    import java.util.*; public class Ch0310 { public static void main(String[] args) { // TODO 自动生成的方法存根 ...

  9. 用命令行批处理bat,设置代理服务器、DNS、网关、WINS等

    http://hi.baidu.com/83050158/blog/item/50cbd63f9da79ccb7d1e711b.html 将下面代码复制到记事本,另存为NetSet.bat,修改相应i ...

  10. v9站点自定义变量

    打开 \phpcms\modules\admin\templates\site_edit.tpl.php 文件,找到最后一个 </fieldset> ,在他后面添加一下代码:<!-- ...