JS实现导航栏楼层特效
程序员文章站
2022-06-17 15:20:44
本文实例为大家分享了js实现导航栏楼层的具体代码,供大家参考,具体内容如下
知识点
1.多个事件有冲突的时候,需要设置flag判断是什么事件,进而进行后续操作。
2.楼层效果就是...
本文实例为大家分享了js实现导航栏楼层的具体代码,供大家参考,具体内容如下
知识点
1.多个事件有冲突的时候,需要设置flag判断是什么事件,进而进行后续操作。
2.楼层效果就是判断scrolltop和offsettop的关系
3.引入工具库
运行效果
导航与界面实现互动
代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> *{margin: 0;padding: 0;list-style: none;border:0;} html, body, ul{width: 100%;height: 100%;} #ul li{ width: 100%; height: 100%; text-align: center; font-size: 30px; /*background-color: red;*/ color: #fff; } #ol{ width: 80px; background-color: #ccc; position: fixed; left: 50px; top: 200px; border: 1px solid #fff; } #ol li{ text-align: center; line-height: 30px; border-bottom: 1px solid #fff; color: #fff; cursor: pointer; } #ol li.current{ background-color: orangered; } </style> </head> <body> <!--导航--> <ol id="ol"> <li class="current">第1层</li> <li>第2层</li> <li>第3层</li> <li>第4层</li> <li>第5层</li> </ol> <!--楼层--> <ul id="ul"> <li>第1层内容</li> <li>第2层内容</li> <li>第3层内容</li> <li>第4层内容</li> <li>第5层内容</li> </ul> <script src="../../00mytools/mytools.js"></script> <script> window.addeventlistener('load', function (ev) { // 1. 获取标签 var ol = mytool.$('ol'), ul = mytool.$('ul'); var ullis = ul.children; var ollis = ol.children; // 是否是点击产生的滚动 var isclick = false; // 2. 上色 var colorarr = ['red', 'green', 'blue', 'purple', 'yellow']; for (var i = 0; i < colorarr.length; i++) { ullis[i].style.backgroundcolor = colorarr[i]; } // 3. 监听导航点击 for (var j = 0; j < ollis.length; j++) { var olli = ollis[j]; (function (index) { olli.addeventlistener('click', function () { isclick = true; for (var i = 0; i < ollis.length; i++) { ollis[i].classname = ''; } this.classname = 'current'; // document.documentelement.scrolltop = index * mytool.client().height; mytool.slowmoving(document.documentelement, {'scrolltop': index * mytool.client().height}, function () { isclick = false; }); }); })(j) } // 4. 监听滚动 var roll = 0; window.addeventlistener('scroll', function (ev1) { if(!isclick){ // 4.1 获取头部滚动偏移的高度 roll = math.ceil(number(mytool.scroll().top)); // 4.2 遍历 for (var i = 0; i < ullis.length; i++) { // 4.3 判断 if(roll >= ullis[i].offsettop){ for (var j = 0; j < ollis.length; j++) { ollis[j].classname = ''; } ollis[i].classname = 'current'; } } } }) }); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。