有关楼层滚动且对应楼层Nav导航高亮显示
$(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导航高亮显示的更多相关文章
- jQuery右侧悬浮楼层滚动 电梯菜单
http://www.kaiu.net/effectCon.aspx?id=2198 <!doctype html> <html> <head> <meta ...
- jquery版楼层滚动特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼 ...
- U3D学习11——nav导航和动画
一.nav导航 1.nav mesh agent 2.off mesh link 3.navigation面板-areas标签的应用,导航分层 二.动画 1.avatar可重用. 2.Animator ...
- vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- dede使用方法---用js让当前导航高亮显示
当前导航高亮显示能够提升用户体验,我也知道,大家在网上搜dede让当前导航高亮显示的方法一抓一大把,但是,并不一定适合自己的需求.就像我的需求一样,导航有个二级导航,然后需要做到让当前导航高亮显示.我 ...
- 用jquery实现楼层滚动对应导航高亮
html 结构排版: // 定位到页面左侧或者右侧 <div class="nav"> <ul id="menu-list"& ...
- HTML5商城开发一 楼层滚动加载数据
对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...
- [vue ]滚动视图解决ElementUI NavMenu 导航菜单过长显示的问题
记录一下工作 需求 导航菜单过长的时候会溢出,需要一个像 Tabs 标签页一样的滚动视图容器,可以左右滚动内部视图. 解决方法 由于时间问题,所以直接将 Tabs 源码抽取出来使用. 这里要做一些特殊 ...
- 纯CSS实现nav导航栏+jQuery实现article区DIV切换
效果图: main.html 代码: <!DOCTYPE html> <html> <head> <title>MyHomepage</title ...
随机推荐
- 个人新站 【EXP技术分享博客】 落成~ 全新的技术资源~ 欢迎莅临~
对的,我筹备了大半年的个站技术网站正式开张了~ EXP技术分享博客: http://exp-blog.com CSDN上面大部分文章已经迁移过去了,以后也会更多地在新站点更新~ 为了庆祝新站开张,近期 ...
- LintCode——第K大元素
第K大元素:在数组num中找到第k大的元素(可以交换数组中的元素的位置) 样例: 数组 [9,3,2,4,8],第三大的元素是 4 数组 [1,2,3,4,5],第一大的元素是 5,第二大的元素是 4 ...
- (1) English Learning
1. no-brainer 不必花脑筋的事物 This tool is really no-brainer that almost everyone can use it. 这个工具太简单用了,不会 ...
- DRF03
为了方便接下来的操作,需要在admin站点创建一个管理员. python manage.py createsuperuser 可在setting.py中修改admin站点语言, LANGUAGE_CO ...
- 团队项目M1展示成绩和Week 10分数
根据M1项目评审的分数,分档打分得到的M1项目成绩.
- 作业三:LINUX内核的启动过程
作业三:LINUX内核的启动过程 一.使用GDB跟踪内核从start_kernel到init进程启动(附实验截图) (一)使用自己的Linux系统环境搭建MenuOS的过程 下载内核源代码编译内核 c ...
- C语言版本:顺序表的实现
seqlist.h #ifndef __SEQLIST_H__ #define __SEQLIST_H__ #include<cstdio> #include<malloc.h> ...
- [BUG随想录] 看不见的分隔符: Zero-width space
今天在调试一段代码的时候,有一个输入不能为空的库函数抛出了异常(为空就会抛出异常,就是这么傲娇).自己暗骂了自己一番,怎么这么大意,于是追溯源头,开始寻找输入控制的地方.但是当我找到时我惊呆了,我明明 ...
- week7:个人博客作业
这周有2个需要注意的地方. 1,课上 这周是由张翼飞老师讲的课,上周已经听过老师讲的一节课了,这周发现,这个老师讲课是理论+案例,我每节课都在第一排坐的,我不知道其他人是什么想法,我是一上课,老师讲理 ...
- ElasticSearch 2 (32) - 信息聚合系列之范围限定
ElasticSearch 2 (32) - 信息聚合系列之范围限定 摘要 到目前为止我们看到的所有聚合的例子都省略了搜索请求,完整的请求就是聚合本身. 聚合与搜索请求同时执行,但是我们需要理解一个新 ...