有关楼层滚动且对应楼层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 ...
随机推荐
- A Zero Flow Entry Expiration Timeout P4 Switch
文章名称:A Zero Flow Entry Expiration Timeout P4 Switch 零流表项期满超时P4交换机 发表时间:2018 期刊来源:SOSR ABSTRACT (摘要) ...
- 基于OVS的VLAN虚拟化简易实践方案
基于OVS的VLAN虚拟化简易实践方案 前言 本实验基于ovs的vlan流表匹配,根据端口进行vlan标签插入.手工配置ovs,使其具有vlan虚拟化方案. 实验拓扑 ---- ---- | h1 | ...
- java实现图像的直方图均衡以及灰度线性变化,灰度拉伸
写了四个方法,分别实现图片的灰度化,直方图均衡,灰度线性变化,灰度拉伸,其中好多地方特别是灰度拉伸这一块觉得自己实现的有问题,请大大们多多指教. import java.awt.Image; impo ...
- DirectoryEntry_Properties属性的遍历(win2003)
DirectoryEntry root = new DirectoryEntry(@"IIS://localhost/W3SVC"); string PInfo = "& ...
- sql两个日期之间的查询统计
sql查询统计 sql语句: select count(code) as '统计',create_time as '订单时间' from sp_orders where datediff(create ...
- webpack 搭建vue项目流程
1.安装node 2.打开命令行输入 npm install -g vue-cli 3.vue init webpack-simple vue 4.各种确认(enter键) 5.npm instal ...
- eclipse对maven项目进行打war包
1. 利用pom.xml进行打包 右键项目名称或者pom.xml文件,选择debugAS或者runAS,选择maven install执行成功之后日志会打印输出位置 2. 使用命令打包 右键项目名称, ...
- JDK8新特性,方法的引用
引用方法并运行 在Java中,方法和构造方法都看作是对象的一种,那么你要引用它(不是调用),则可以用::来引用.用来存储这个引用的类型用@FunctionlaInterface注解来标识. 示例: p ...
- HTTTP及TCP的超时以及KEEP-ALIVE机制小结
一.HTTP的超时和Keep Alive HTTP Keepalive 机制是http 1.1中增加的一个功能. 在HTTP 1.0中,客户端每发起一个http 请求,等收到接收方的应答之后就断开TC ...
- 【题解】 bzoj1503: [NOI2004]郁闷的出纳员 (Splay)
bzoj1503,懒得复制,戳我戳我 Solution: 我知不知道我是那根筋抽了突然来做splay,调了起码\(3h+\),到第二天才改出来(我好菜啊),当做训练调错吧 一个裸的splay,没啥好说 ...