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 26 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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
zend framework中使用memcache的方法
2016/03/04 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
JavaScript的parseInt 取整使用
2011/05/09 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
JS获取时间的方法
2015/01/21 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
简单学习vue指令directive
2016/11/03 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python之eval()函数危险性浅析
2014/07/03 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
Python闭包实现计数器的方法
2015/05/05 Python
python获取目录下所有文件的方法
2015/06/01 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
倩碧英国官网:Clinique英国
2018/08/10 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
新闻发布会策划方案
2014/06/12 职场文书
爱国口号
2014/06/19 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书