$(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. EOS开发基础之三:使用cleos命令行客户端操作EOS——关于钱包wallet和账户account

    好了,上一节我们已经讲了关于wallet的一些基础操作,基本了解了怎么去创建一个钱包,怎么去查看钱包.上锁和解锁钱包等,这一节咱们就来开始操作账户account吧. 上一节讲到了每一个account都 ...

  2. PHP学习 例外和错误处理

    <?phptry{ open_folder("C:\\book");}catch(Exception $ex) { echo 'Error Message:'.$ex-> ...

  3. SpringMVC 之 @ResponseBody 和 @RequestBody

    前后端进行数据交互的时候,规定数据交互的格式,使数据交互规范而统一,是极为重要的事.一般而言,我们会采用 JSON 进行数据交互.本文暂不讨论如何 JSON 的格式规范,而是解析一下如何在 Sprin ...

  4. PAT甲题题解-1040. Longest Symmetric String (25)-求最长回文子串

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789177.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  5. A. Elections

    链接 [http://codeforces.com/contest/1043/problem/A] 题意 有n个投票人已经投个对手ai票,让你求最小的k使得k-ai加起来大于,对手得票总和 分析 一个 ...

  6. 【SE】Week2 : 个人博客作业

    1. 是否需要有代码规范 对于是否需要有代码规范,请考虑下列论点并反驳/支持: Statement1 :  这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 这样的 ...

  7. 20135327郭皓——Linux内核分析第二周 操作系统是如何工作的

    操作系统是如何工作的 上章重点回顾: 计算机是如何工作的?(总结)——三个法宝 存储程序计算机工作模型,计算机系统最最基础性的逻辑结构: 函数调用堆栈,高级语言得以运行的基础,只有机器语言和汇编语言的 ...

  8. Final版本发布评论

    1.飞天小女警组做的礼物挑选小工具,相比较beta版本并没有太大的改动,新增添了“猜你喜欢”模块,在最后给出的礼物推荐下面会给出三个猜你喜欢的礼物.这样解决了推荐礼物的单一,也让礼物推荐变得更有趣了. ...

  9. [财务知识] debt debit credit 的区别于联系

    https://blog.csdn.net/sjpljr/article/details/70169303 剑桥词典解释分别为: Debt [C or U ] n.something, especia ...

  10. postman 学习网址

    postman使用详解: http://gold.xitu.io/entry/57597a62a341310061337885 https://www.getpostman.com/docs/writ ...