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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
详解jQuery事件
Jan 13 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 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注入实例
2006/10/09 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
JQuery的html(data)方法与<script>脚本块的解决方法
2010/03/09 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
编辑找工作求职信分享
2014/01/03 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
车辆转让协议书
2014/09/24 职场文书
交通事故协议书范本
2014/11/18 职场文书
三好学生评语大全
2014/12/29 职场文书
先进个人自荐书
2015/03/06 职场文书
放假通知格式
2015/04/14 职场文书