js实现楼层导航功能


Posted in Javascript onFebruary 23, 2017

图如下所示:

js实现楼层导航功能

1.点击跳转到相应区域:

页面scroll掉的距离 = 目标板块在文档中的垂直坐标 - 起始板块(目标位置)到视图顶部的距离;

document.body.scrollTop = scrollLength; 

document.documentElement.scrollTop = scrollLength;

2.滚动滚动条时对应的导航链接被激活

每个板块的导航链接对应一个长度区间,当滚动条滚动调的长度落在该区间时,该导航条则被选中。区间范围为当前板块的scrollTop值(包含)~下一板块的ScrollTop值(不包含)。

例如:第一板块的区间为0~第二板块的scrollTop值(即第一板块的高度),当滚动条滚动的距离落在该区间时,则第一个链接激活。

如何确定区间?将链接倒叙排列,依次循环判断,第一个(滚动条滚动的距离>区间最小值)成立的链接即为激活链接。

var currIndex=0;
window.onscroll = function () {
var $cptop = $('.cp-top');

var scrollLength = document.documentElement.scrollTop || document.body.scrollTop; //滚动条滚动的距离

var list_area = _.map($('#area li.group'), function (item, index) {



return { top: item.offset().top, index: index };
 
}); //所有的板块
 
list_area = _.sortBy(list, function (item) { return -item.index; }); //倒序

var reachedArea = _.find(list_area, function (item) {
 

return scrollLength >= item.top;
 
});

//滚动的距离大于该区间的最小top值

if (currIndex != reachedArea.index) {



currIndex = reachedArea.index;



$(".navField li").removeClass('selected');



$(".navField li").eq(reachedField.index).addClass('selected');

}
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
详解jenkins自动化部署vue
May 14 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
jQuery点击头像上传并预览图片
Feb 23 #Javascript
jQuery事件与动画基础详解
Feb 23 #Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 #Javascript
解析Vue2.0双向绑定实现原理
Feb 23 #Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 #Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 #Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 #Javascript
You might like
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
Javascript倒计时代码
2010/08/12 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
十条建议帮你提高Python编程效率
2016/02/16 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
Python部署web开发程序的几种方法
2017/05/05 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
python flask搭建web应用教程
2019/11/19 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Python itertools.product方法代码实例
2020/03/27 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
Python Merge函数原理及用法解析
2020/09/16 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
招聘专员岗位职责
2014/03/07 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
毕业典礼邀请函
2015/01/31 职场文书
自主招生自荐信格式
2015/03/04 职场文书
酒店宣传语大全
2015/07/13 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
redis数据一致性的实现示例
2022/03/18 Redis
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android