$(document).ready(function(e) {

//定义数组,储存楼层距离顶部的高度(floorsTop)

var floorsTop=[];

function floorsTopF(){

for(var i=0; i<$(".floors").length;i++){

floorsTop[i]=($(".floors").eq(i).offset().top)-40;

}

}

//获取每一个楼层距离Top的高度; 200 300 400 500 / 110 210 310 410

function floorsNavF(){
var sTop = $(document).scrollTop(); //获取垂直滚动的距离 如果滚动条的高度大于楼层一的高度
if(sTop>floorsTop[0]){
$("#floorsNav").fadeIn(500);
}else{
$("#floorsNav").fadeOut(500);
} for(var i=0; i<=$("#floorsNav li").length;i++){ //楼层个数
if( sTop >= floorsTop[i] && sTop < floorsTop[i+1] ){
$("#floorsNav li").removeClass("on");
$("#floorsNav li").eq(i).addClass("on");
}else if(sTop >= floorsTop[i] && sTop <$("#endhdd").offset().top){
$("#floorsNav li").removeClass("on");
$("#floorsNav li").eq(i).addClass("on");
}else if(sTop>$("#endhdd").offset().top){
$("#floorsNav li").removeClass("on");
}
}
} $(window).scroll(function(e){
floorsTopF();
floorsNavF();
}); $("#floorsNav li").each(function(i) {
$(this).click(function(){
var num=floorsTop[i]+20;
$('html, body').animate({scrollTop: num}, 300);
})
});

});

有关楼层滚动且对应楼层Nav导航高亮显示的更多相关文章

  1. jQuery右侧悬浮楼层滚动 电梯菜单

    http://www.kaiu.net/effectCon.aspx?id=2198 <!doctype html> <html> <head> <meta ...

  2. jquery版楼层滚动特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼 ...

  3. U3D学习11——nav导航和动画

    一.nav导航 1.nav mesh agent 2.off mesh link 3.navigation面板-areas标签的应用,导航分层 二.动画 1.avatar可重用. 2.Animator ...

  4. vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  5. dede使用方法---用js让当前导航高亮显示

    当前导航高亮显示能够提升用户体验,我也知道,大家在网上搜dede让当前导航高亮显示的方法一抓一大把,但是,并不一定适合自己的需求.就像我的需求一样,导航有个二级导航,然后需要做到让当前导航高亮显示.我 ...

  6. 用jquery实现楼层滚动对应导航高亮

    html 结构排版: // 定位到页面左侧或者右侧 <div class="nav">         <ul id="menu-list"& ...

  7. HTML5商城开发一 楼层滚动加载数据

    对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...

  8. [vue ]滚动视图解决ElementUI NavMenu 导航菜单过长显示的问题

    记录一下工作 需求 导航菜单过长的时候会溢出,需要一个像 Tabs 标签页一样的滚动视图容器,可以左右滚动内部视图. 解决方法 由于时间问题,所以直接将 Tabs 源码抽取出来使用. 这里要做一些特殊 ...

  9. 纯CSS实现nav导航栏+jQuery实现article区DIV切换

    效果图: main.html 代码: <!DOCTYPE html> <html> <head> <title>MyHomepage</title ...

随机推荐

  1. github添加ssh连接用户

    最近打算用flask写一个自己的博客网站,打算把代码放在GitHub上,使用ssh访问.记录下GitHub配置ssh用户的流程. 1.在本地电脑或云服务器上生成ssh公钥和私钥,window下可以进入 ...

  2. PAT甲题题解-1009. Product of Polynomials (25)-多项式相乘

    多项式相乘 注意相乘结果的多项式要开两倍的大小!!! #include <iostream> #include <cstdio> #include <algorithm& ...

  3. 在CentOS上搭建PHP服务器环境(可用)

    原文:https://www.cnblogs.com/zy2009/p/7047828.html 1,先安装apache: yum install httpd 配置ServerName vi /etc ...

  4. [2017BUAA软工助教]结对组队

    请同学们把第一次结对编程双方的学号评论在本博客下,只要一位同学评论即可.例如: 14061195 + 14061183

  5. Java单元测试框架 JUnit

    Java单元测试框架 JUnit JUnit是一个Java语言的单元测试框架.它由Kent Beck和Erich Gamma建立,逐渐成为源于KentBeck的sUnit的xUnit家族中为最成功的一 ...

  6. 团队工作总结及自评 & 补上来的用户调研

    http://www.cnblogs.com/case1/ 让同学代发了,辛苦点跳转一下~

  7. win8以上windows系统eclipse环境下图片显示乱码问题解决

    相信升级了win10系统的诸多安卓开发者在用eclipse时会发现一个很不爽的地方,就是原本win7环境下能正常打开的图片文件现在成了一页乱码,我曾多次碰到这个问题,在网上也很难找到行之有效的具体解决 ...

  8. Visual Studio2013安装过程

    Visual Studio是微软开发的一套基于组件的软件开发工具,我选择安装的是Visual Studio2013版本.首先, 第一步是要找到一个安装包: 我们可以直接百度MSDN,显示的第一条就是官 ...

  9. git 客户端连接gitlab 实现简单的CI/CD

    1. git 客户端的安装 下载: https://git-scm.com/download/win 截至最近:20180728最新版本 2.18的下载地址 https://github-produc ...

  10. [转]MySQL 数据库事务隔离级别

    然后说说修改事务隔离级别的方法: 1. 全局修改,修改 mysql.ini 配置文件,在最后加上 1 #可选参数有:READ-UNCOMMITTED, READ-COMMITTED, REPEATAB ...