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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
图解JavaScript中的this关键字
May 28 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
在PHP中执行系统外部命令
2006/10/09 PHP
PHP新手上路(四)
2006/10/09 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
javascript工具库代码
2012/03/29 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Python列表切片用法示例
2017/04/19 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
python实现统计代码行数的小工具
2019/09/19 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
早恋主题班会
2015/08/14 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
mysql幻读详解实例以及解决办法
2022/06/16 MySQL