我要评论本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论