有关楼层滚动且对应楼层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 ...
随机推荐
- ats透明代理
透明代理是拦截客户端和服务器之间的连接而不可见的代理能力(比如ats). 必须要有一个网关设备,所有网络流量都通过该设备从客户端传递到Internet(或外部云).网关负责有效的将ATS拼接到该流量的 ...
- 图-图的表示、搜索算法及其Java实现
1.图的表示方法 图:G=(V,E),V代表节点,E代表边. 图有两种表示方法:邻接链表和邻接矩阵 邻接链表因为在表示稀疏图(边的条数|E|远远小于|V|²的图)时非常紧凑而成为通常的选择. 如果需要 ...
- PAT甲题题解-1101. Quick Sort (25)-大水题
快速排序有一个特点,就是在排序过程中,我们会从序列找一个pivot,它前面的都小于它,它后面的都大于它.题目给你n个数的序列,让你找出适合这个序列的pivot有多少个并且输出来. 大水题,正循环和倒着 ...
- js中判断是否包含某个字符串
1,字符串中是否包含 str.indexOf("3")indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则该方法返回 -1. ...
- C#回调函数的简单讲解与应用例子(最简单讲解,大神绕道)
本博客一直以来的宗旨就是:用最简单的方式讲清楚不复杂的问题. 因为本人也很菜所以也没法讲太复杂HHHHHH...... 所以如果哪天某个大神看到了觉得讲的有问题欢迎指出. 话不多说进入正题.. ——— ...
- Java实现模拟登录新浪微博
毕设题目要使用到新浪微博数据,所以要爬取新浪微博的数据.一般而言,新浪微博的爬虫有两种模式:新浪官方API和模拟登录新浪微博.两种方法的异同点和适用情况就无须赘述了.前辈的文章已经非常多了.写这篇文章 ...
- Java 笔记——在 IDEA 中使用 Maven 配置和使用 MyBatis
1.前言 MyBatis 是什么? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射. MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集. ...
- Beta阶段敏捷冲刺②
1.提供当天站立式会议照片一张. 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 1.1昨天已完成的工作. 姓名 昨天已完成的工作 徐璐琳 完成设置界面的排版 祁泽文 实 ...
- windows日志查看-非法关机判断方法
日志文件,它记录着Windows系统及其各种服务运行的每个细节,对增强Windows的稳定和安全性,起着非常重要的作用.但许多用户不注意对它保护,一些“不速之客”很轻易就将日志文件清空,给系统带来严重 ...
- 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$.