$(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. A Zero Flow Entry Expiration Timeout P4 Switch

    文章名称:A Zero Flow Entry Expiration Timeout P4 Switch 零流表项期满超时P4交换机 发表时间:2018 期刊来源:SOSR ABSTRACT (摘要) ...

  2. 基于OVS的VLAN虚拟化简易实践方案

    基于OVS的VLAN虚拟化简易实践方案 前言 本实验基于ovs的vlan流表匹配,根据端口进行vlan标签插入.手工配置ovs,使其具有vlan虚拟化方案. 实验拓扑 ---- ---- | h1 | ...

  3. java实现图像的直方图均衡以及灰度线性变化,灰度拉伸

    写了四个方法,分别实现图片的灰度化,直方图均衡,灰度线性变化,灰度拉伸,其中好多地方特别是灰度拉伸这一块觉得自己实现的有问题,请大大们多多指教. import java.awt.Image; impo ...

  4. DirectoryEntry_Properties属性的遍历(win2003)

    DirectoryEntry root = new DirectoryEntry(@"IIS://localhost/W3SVC"); string PInfo = "& ...

  5. sql两个日期之间的查询统计

    sql查询统计 sql语句: select count(code) as '统计',create_time as '订单时间' from sp_orders where datediff(create ...

  6. webpack 搭建vue项目流程

    1.安装node 2.打开命令行输入  npm install -g vue-cli 3.vue init webpack-simple vue 4.各种确认(enter键) 5.npm instal ...

  7. eclipse对maven项目进行打war包

    1. 利用pom.xml进行打包 右键项目名称或者pom.xml文件,选择debugAS或者runAS,选择maven install执行成功之后日志会打印输出位置 2. 使用命令打包 右键项目名称, ...

  8. JDK8新特性,方法的引用

    引用方法并运行 在Java中,方法和构造方法都看作是对象的一种,那么你要引用它(不是调用),则可以用::来引用.用来存储这个引用的类型用@FunctionlaInterface注解来标识. 示例: p ...

  9. HTTTP及TCP的超时以及KEEP-ALIVE机制小结

    一.HTTP的超时和Keep Alive HTTP Keepalive 机制是http 1.1中增加的一个功能. 在HTTP 1.0中,客户端每发起一个http 请求,等收到接收方的应答之后就断开TC ...

  10. 【题解】 bzoj1503: [NOI2004]郁闷的出纳员 (Splay)

    bzoj1503,懒得复制,戳我戳我 Solution: 我知不知道我是那根筋抽了突然来做splay,调了起码\(3h+\),到第二天才改出来(我好菜啊),当做训练调错吧 一个裸的splay,没啥好说 ...