2-15 bom 特效开发楼层导航

来源：2-15 BOM特效开发（2）

慕移动4506339

2022-11-16 15:43:35

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>楼层导航</title>
<style>
* {
margin: 0;
padding: 0;
}

body {
height: 5000px;
}

section.content-part {
width: 600px;
margin: 0px auto;
margin-bottom: 40px;
background-color: gray;
font-size: 28px;
}

nav {
width: 80px;
height: 150px;
background-color: yellow;
position: fixed;
right: 20px;
top: 50px;
text-align: center;
line-height: 30px;
}

ul {
list-style: none;
}

.current {
color: white;
background-color: purple;
}
</style>
</head>

<body>
<nav class="nav">
<ul id="list">
<li data-n="新闻" class="current">新闻</li>
<li data-n="娱乐">娱乐</li>
<li data-n="财经">财经</li>
<li data-n="体育">体育</li>
<li data-n="政治">政治</li>
</ul>
</nav>
<section class="content-part" style="height:455px;" data-n="新闻">新闻板块</section>
<section class="content-part" style="height:568px;" data-n="娱乐">娱乐板块</section>
<section class="content-part" style="height:654px;" data-n="财经">财经板块</section>
<section class="content-part" style="height:718px;" data-n="体育">体育板块</section>
<section class="content-part" style="height:324px;" data-n="政治">政治板块</section>

<script>
var lists = document.getElementById('list')
//事件委托(注意必须注明参数e)
lists.onclick = function (e) {
if (e.target.tagName.toLowerCase() == 'li') {
var n = e.target.getAttribute('data-n');
var part = document.querySelector('.content-part[data-n=' + n + ']');
document.documentElement.scrollTop = part.offsetTop;
}
}
var arr = [];
//获得所有的content-parts
var contentlists = document.querySelectorAll('.content-part');
//遍历所有content-parts，得到每个板块距离页面顶端的距离,推入arr数组中
for (var i = 0; i < contentlists.length; i++) {
arr.push(contentlists[i].offsetTop)
}
arr.push(Infinity);
console.log(arr);
//设置换楼再输出i，类似于函数节流功能
var nowFloor = -1;
//页面滚条上下滑动时，触发scroll事件
window.onscroll = function () {
//获得滚条滑动距离
var scrollTop = document.documentElement.scrollTop;
//比较实际滑动的距离和数组中每个板块距离页面顶端距离从而判断是在第几层
for (var i = 0; i < contentlists.length; i++) {
//滚条滑动距离在i(包括i)到i+1之间，就是第i层
if (scrollTop >= arr[i] && scrollTop < arr[i + 1]) break;
}
if (nowFloor != i) {
console.log(i);
nowFloor = i;
}
//获得导航栏的所有li,
var lis = document.querySelectorAll('li');
//遍历所有li
for (var j = 0; j < lis.length; j++) {
if (j == i) {
lis[j].className = 'current';
} else {
lis[j].className = '';
}
}
}
</script>
</body>

</html>

老师，请检查

写回答

1回答