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');
　　}
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • js获取浏览器和屏幕的各种宽度高度

    一:网页可见区域宽高,不包括工具栏和滚动条(浏览器窗口可视区域大小) 1.对于IE9+.chrome.firefox.Opera.Safari: window.innerHeight浏览器窗口的内部高度: window.innerWidth浏览器窗口的内部宽度: 2.对于IE8.7.6.5: document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度: document.documentElement.clientWidth:表示HTML文档所

  • js实现带简单弹性运动的导航条

    js实现带简单弹性运动的导航条

    晚上跟着视频敲了下 弹性菜单的代码,先记下来 效果如下: 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } .ul1{ width:450px; height:30px; margi

  • js实现简易垂直滚动条

    js实现简易垂直滚动条

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>垂直滚动条</title> <style type="text/css"> .con { width: 350px; height: 600px; border: 1px solid saddlebrown; position: relativ

  • javascript 操作cookies详解及实例

    javascript 操作cookies详解 这段操作cookies的方法我使用很久了,但是一直一来没遇到什么问题,今天在做一个在第一个页面保存了cookies,第二个页面获取或者第三个页面获取的功能中,发现了方法的局限性,比如,第一个页面路径为 http://xxxxx/cyb-car2016/h5OfficeWorker/index,第二个页面路径为 http://xxxxx/cyb-car2016/h5AlertController/index,其中除了域名是一样之外,还有一个命名空间不一

  • Javascript 链式作用域详细介绍

     Javascript 链式作用域 其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但程序的设计,基本都是为了简单,便于理解的.记住JS中经典的一句话是,一切皆对象. 说白了链式作用域,其实就是Javascript的一个特性:子函数中可以访问父函数的所有变量.当然也包括全局变量window(一般的函数定义function a(){},其实都是win

  • javascript 网页进度条简单实例

    javascript 网页进度条简单实例 最近学习新的知识,遇到一个小功能网页进度条,发现一篇文章还是不错的,这里记录下,也许能帮助到大家, 实例代码: <!DOCTYPE html> <html> <head> <style> #box {float:left;width:100%;height:18px;border:1px solid;} #bar {float:left;width:100%;height:18px;border:0px;backgr

  • 基于JS实现移动端向左滑动出现删除按钮功能

    基于JS实现移动端向左滑动出现删除按钮功能

    最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有.上网查资料,又下载了最新版本的zepto和touch.js,都没有用,也不知为什么?所以就弃用了这个插件. 下面是我后来实现后的代码,其实就是用了原生js的touch事

  • 微信小程序 引用其他js文件实现代码

    微信小程序如何引用其他js文件 1.我们先建立一个common.js文件,在common.js编写我们的程序, function myfunc() { console.log("myfunc...."); } module.exports.myfunc = myfunc; 这样暴露接口,这里不暴露是不能引用的, 在文件域js内 var common = require("../../common.js");去链接过来,光链接过来还不行! var app; var c

  • js实现楼层导航功能

    js实现楼层导航功能

    图如下所示: 1.点击跳转到相应区域: 页面scroll掉的距离 = 目标板块在文档中的垂直坐标 - 起始板块(目标位置)到视图顶部的距离: document.body.scrollTop = scrollLength; document.documentElement.scrollTop = scrollLength; 2.滚动滚动条时对应的导航链接被激活 每个板块的导航链接对应一个长度区间,当滚动条滚动调的长度落在该区间时,该导航条则被选中.区间范围为当前板块的scrollTop值(包含)~

  • js实现楼层效果的简单实例

    今天自己写个楼层效果,有一点烦躁,小地方犯错误.各位大神来修改不足啊!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>楼层切换</title> <style> *{padding: 0;margin: 0;} li{list-style: none;} .main img{width:

  • js实现楼层滚动效果

    本文实例为大家分享了jquery实现滑动楼梯效果,实现楼层的滚动以及点击楼层按钮跳转到对应的楼层,代码如下 html代码: <div style="height: 500px; background-color: black; color: #fff;">无意义的文本</div> <div class="layerbox"> <div class="layer num1">第一层</div&g

  • js实现二级导航功能

    js实现二级导航功能

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> a{text-decoration: none;} *{margin: 0;padding: 0;box-sizing: border-box;font-family: &quo

  • JS实现留言板功能[楼层效果展示]

    JS实现留言板功能[楼层效果展示]

    功能实现: 1.发布人和发布内容非空校验 2.编辑删除功能 3.楼层效果展示 4.发布时间展示 效果图 目录 tools.js 时间工具包 function getTime(){ var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var date = new Date(); var year = date

  • vue.js实现会动的简历(包含底部导航功能，编辑功能)

    vue.js实现会动的简历(包含底部导航功能，编辑功能)

    在网上看到一个这样的网站,STRML它的效果看着十分有趣,如下图所示: 这个网站是用 react.js 来写的,于是,我就想着用 vue.js 也来写一版,开始撸代码. 首先要分析打字的原理实现,假设我们定义一个字符串 str ,它等于一长串注释加 CSS 代码,并且我们看到,当 css 代码写完一个分号的时候,它写的样式就会生效.我们知道要想让一段 CSS 代码在页面生效,只需要将其放在一对 <style> 标签对中即可.比如: <!DOCTYPE html> <html&

  • JS实现导航栏楼层特效

    JS实现导航栏楼层特效

    本文实例为大家分享了JS实现导航栏楼层的具体代码,供大家参考,具体内容如下 知识点 1.多个事件有冲突的时候,需要设置flag判断是什么事件,进而进行后续操作. 2.楼层效果就是判断scrollTop和offsetTop的关系 3.引入工具库工具库 运行效果 导航与界面实现互动 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

  • JS实现网站楼层导航效果代码实例

    壹 ❀ 引言 对于楼层导航而言,还有个重要的功能就是,随着滚动条滚动,达到某层时得同步点亮楼层导航的小图片. 由于我前面也说了不打算使用JQ,所以想着用JS去实现它,实现并不难,主要得弄清滚动满足怎样的条件才应该点亮对应楼层,我们先看看实现效果: 贰 ❀ 实现思路 第一点,因为是由滚动触发的楼层判断,所以肯定离不开onscroll事件. 第二点,我们貌似要获取每个楼层顶端距离视窗顶部的距离,随着滚动条往下滚动,此距离会不断缩小,当接近到某个距离时我们判定此楼层入画,当然其它楼层都满足此判定. 而

  • js实现网页定位导航功能

    js实现网页定位导航功能

    本文实例为大家分享了js网页定位导航的具体代码,供大家参考,具体内容如下 一个循环判断当前滚动到的位置,另一个循环遍历导航条判断其id是否与滚动到的位置相同 效果如图: 实现代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>地狗购物网--网页定位导航效果</title> <style type

  • 纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）

    纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）

    实现效果演示: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>楼层跳跃式的页面布局</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } body, html{ height: 100%; } ul{ list-style: n

随机推荐