有关楼层滚动且对应楼层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上面大部分文章已经迁移过去了,以后也会更多地在新站点更新~ 为了庆祝新站开张,近期 ...
- Overlay技术
- CentOS Docker环境搭建教程
安装与配置 Docker 安装 Docker Docker 软件包已经包括在默认的 CentOS-Extras 软件源里.因此想要安装 docker,只需要运行下面的 yum 命令: yum inst ...
- img 分区响应图
---恢复内容开始--- a标签的target为_blank属性,意为跳转到新的页面. shape要和coords配合使用,shape为rect时意义为矩形.shape 为不同属性时意为不同的形态触碰 ...
- 2019 front-end web trending
2019 front-end web trending https://github.com/kamranahmedse/developer-roadmap https://raw.githubuse ...
- wordpress点击中文tag标签出现404解决方案
TypeCho转WordPress之后,发现点击中文tag出现404页面,也就是点击无效了.试了几种修改链接样式,都没效果.也尝试了各种网上找的3中方法: 第一种方法:打开 WP-include/cl ...
- MongoDB高级操作(2)
查询方法-常用查询方法 查询多条数据 --db.集合名称.find({条件文档}) 查询一条数据 --db.集合名称.findOne({条件文档}) 结果格式化 --pretty()方法 --db.集 ...
- BZOJ4628 BJOI2016IP地址(trie)
离线,每次修改相当于对该规则的所有匹配点的值+1,考虑在trie上打加法标记和匹配标记,匹配标记不下传,加法标记下传遇到匹配标记时清空.注意是用b时刻前缀-a时刻前缀,而不是(a-1)时刻前缀,具体我 ...
- Django 高并发负载均衡
1 什么是负载均衡? 当一台服务器的性能达到极限时,我们可以使用服务器集群来提高网站的整体性能.那么,在服务器集群中,需要有一台服务器充当调度者的角色,用户的所有请求都会首先由它接收,调度者再根据每台 ...
- Java 8新特性之lambda(八恶人-2)
Major Marquis Warren 沃伦·马奎斯少校 “Tring to get a couple of bounties in to Red Rock.”我想带几个通缉犯去红石镇 一.基本介绍 ...