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 相关文章推荐
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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 self与$this的详解
2013/06/08 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
Javascript 遍历对象中的子对象
2009/07/03 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
python 判断自定义对象类型
2009/03/21 Python
python查询mysql中文乱码问题
2014/11/09 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
Python字符串格式化
2015/06/15 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python实现狄克斯特拉算法
2019/01/17 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
公司租房协议书
2014/10/14 职场文书
退休教师追悼词
2015/06/23 职场文书
资产移交协议书
2016/03/24 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技