//菜单栏始终浮动在顶部
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. JAVA - hashcode与equals作用、关系

      Hashcode的作用 总的来说,Java中的集合(Collection)有两类,一类是List,再有一类是Set.前者集合内的元素是有序的,元素可以重复:后者元素无序,但元素不可重复.      ...

  2. Vitamio VideoView 示例

    VideoView 播放本地视频 /**  * 会根据视频尺寸自动缩放  * 自己对VideoView设置的宽高基本不起任何作用  */ public class VideoViewDemo exte ...

  3. 小学生之Map集合框架的使用

    Map用于保存具有映射关系的数据(key-vlaue).Map的key不允许重复,即同一个Map对象的任何两个key通过equals方法比较总是返回false Map中包含了一个keySet()方法, ...

  4. Eclipse下Maven插件配置

    要做一个基于C/S架构的汽车租赁系统,由于在实习期间接触过一些Java和SpringMVC,Spring,Hibernate的东西,所以决定使用这个框架组合来完成这个项目. 首先是Maven的配置,为 ...

  5. DNS负载均衡

    1)DNS负载均衡的介绍 对于负载均衡的一个典型应用就是DNS负载均衡.庞大的网络地址和网络域名绝对是负载均衡体现优势的地方.那么它的具体原理是如何的呢?本文就将为大家详细介绍一下相关内容. DNS负 ...

  6. centos 安装php

    1.yum安装 yum install php php-fpm php-common php-gd php-mcrypt php-pear php-pecl-memcache php-mhash ph ...

  7. storm-kafka教程

    一.原理介绍   本文内容参考:https://github.com/apache/storm/tree/master/external/storm-kafka#brokerhosts (一)使用st ...

  8. 企业管理系统开发笔记(4)---后台登录_MVC过滤器

    在asp.net时代,我们通常需要在后台的每个页面进行判断用户是否登录的状态,不管是通过session还是通过windows身份验证还是表单验证方式等等方法来对用户登录进行判断跳转.但是在mvc时代, ...

  9. Web 端 js 导出csv文件(使用a标签)

    前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...

  10. js 懒加载

    需要的js <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> < ...