$(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. ats透明代理

    透明代理是拦截客户端和服务器之间的连接而不可见的代理能力(比如ats). 必须要有一个网关设备,所有网络流量都通过该设备从客户端传递到Internet(或外部云).网关负责有效的将ATS拼接到该流量的 ...

  2. 图-图的表示、搜索算法及其Java实现

    1.图的表示方法 图:G=(V,E),V代表节点,E代表边. 图有两种表示方法:邻接链表和邻接矩阵 邻接链表因为在表示稀疏图(边的条数|E|远远小于|V|²的图)时非常紧凑而成为通常的选择. 如果需要 ...

  3. PAT甲题题解-1101. Quick Sort (25)-大水题

    快速排序有一个特点,就是在排序过程中,我们会从序列找一个pivot,它前面的都小于它,它后面的都大于它.题目给你n个数的序列,让你找出适合这个序列的pivot有多少个并且输出来. 大水题,正循环和倒着 ...

  4. js中判断是否包含某个字符串

    1,字符串中是否包含 str.indexOf("3")indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则该方法返回 -1. ...

  5. C#回调函数的简单讲解与应用例子(最简单讲解,大神绕道)

    本博客一直以来的宗旨就是:用最简单的方式讲清楚不复杂的问题. 因为本人也很菜所以也没法讲太复杂HHHHHH...... 所以如果哪天某个大神看到了觉得讲的有问题欢迎指出. 话不多说进入正题.. ——— ...

  6. Java实现模拟登录新浪微博

    毕设题目要使用到新浪微博数据,所以要爬取新浪微博的数据.一般而言,新浪微博的爬虫有两种模式:新浪官方API和模拟登录新浪微博.两种方法的异同点和适用情况就无须赘述了.前辈的文章已经非常多了.写这篇文章 ...

  7. Java 笔记——在 IDEA 中使用 Maven 配置和使用 MyBatis

    1.前言 MyBatis 是什么? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射. MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集. ...

  8. Beta阶段敏捷冲刺②

    1.提供当天站立式会议照片一张. 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 1.1昨天已完成的工作. 姓名 昨天已完成的工作 徐璐琳 完成设置界面的排版 祁泽文 实 ...

  9. windows日志查看-非法关机判断方法

    日志文件,它记录着Windows系统及其各种服务运行的每个细节,对增强Windows的稳定和安全性,起着非常重要的作用.但许多用户不注意对它保护,一些“不速之客”很轻易就将日志文件清空,给系统带来严重 ...

  10. MT【74】不可能是哪个函数?

    解答:设$f(g(x_0))=x_0$,则$g(f(g(x_0)))=g(x_0)$,令$y_0=g(x_0)$则$g(f(y_0))=y_0$有解.易得答案为$B$.