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

    1) HTTPS是什么 https 是超文本传输安全协议的缩写.HTTPS主要思想是在不安全的网络上创建一种安全的信道,并且可以在使用适当的加密包和服务器证书可被验证且可被信任时候,对窃听和中间人攻击 ...

  2. LINQ Enumerable 续 II

    Enumerable.TakeWhile和Enumerable.SkpWhile Enumerable.TakeWhile和Enumerable.SkpWhile将通过判断条件,来获取和跳过序列. T ...

  3. php防止重复提交问题

    php防止重复提交问题 用户提交表单时可能因为网速的原因,或者网页被恶意刷新,致使同一条记录重复插入到数据库中,这是一个比较棘手的问题.我们可以从客户端和服务器端一起着手,设法避免同一表单的重复提交. ...

  4. Activity的学习

    安卓的四大组件分别是 Activity ,Service服务, BroadcastReceiver广播接收器,ContentProvide内容提供器 . Activity: Activity是应用程序 ...

  5. c-参数(argument)

    In  C,  array arguments behave as though they are passed by reference, and scalar variables and cons ...

  6. 解决Access restriction问题

    今天在导入一个包时报错了

  7. C/C++中unsigned char和char的区别

    代码: #include <cstdio> #include <iostream> using namespace std; int main(){ unsigned char ...

  8. html5中的一些小知识点(CSS)

    1.点击a标签周围区域就可以进入超链接: a标签 的css样式中的 display属性设置为block 就可以了 2.文字左右居中: text-align 属性值为 center 3.文字上下居中:  ...

  9. switch语句中的选择因子

    switch语句能否用作用在byte上,能否作用在long上,能否作用在String上? switch选择语句的格式为: switch(intergral-selector){ case  integ ...

  10. PHP 过滤二维数组和三维数组

    <?php $arr = [ [1,3,5,7,9], [2,4,6,8,0] ]; $arr2 = [ 'list' => [ [1,3,5,7], [2,4,6,8], [3,2,9, ...