老师，案例中原来的代码有点问题
点击旁边导航条中其中一个li的时候页面拉动到对应的位置但是li的样式没有加进去，我让点击之后页面拉动的值加1，使其拉动的位置大一些，点击之后样式就有了。应该是点击拉动的offsetTop的值没有进到所在楼层的offsetTop值的区间。
<!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>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.content-part{
width: 1000px;
margin: 0 auto;
margin-bottom: 30px;
background-color: #777;
color: aliceblue;
font-size: 26px;
}
nav.floornav{
position: fixed;
top: 50%;
margin-top: -60px;
right: 30px;
width: 80px;
height: 115px;
background-color: yellow;
padding-top: 5px;
}
ul{
list-style: none;
margin: 0 auto;
}
ul li{
width: 80px;
text-align: center;
color: #000;
}
.floornav ul li.current{
background-color: purple;
color: white;
}
</style>
</head>
<body>
<nav class="floornav">
<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: 500px;" data-n="科技">
科技栏目
</section>
<section class="content-part" style="height: 400px;" data-n="体育">
体育栏目
</section>
<section class="content-part" style="height: 450px;" data-n="新闻">
新闻栏目
</section>
<section class="content-part" style="height: 600px;" data-n="娱乐">
娱乐栏目
</section>
<section class="content-part" style="height: 500px;" data-n="视频">
视频栏目
</section>
<script>
var list = document.getElementById('list');
var contentParts = document.querySelectorAll('.content-part');
var lis = document.querySelectorAll("#list li");
console.log(lis);
list.onclick=function(e){
if(e.target.tagName.toLowerCase()=='li'){
var n = e.target.getAttribute("data-n");
var contentPart = document.querySelector("section[data-n="+n+"]");
document.documentElement.scrollTop = contentPart.offsetTop+1;
}
}
// 遍历所有的contentPart，将他们的净位置推入数组
var offsetTopArr = [];
for(var i = 0; i<contentParts.length ; i++){
offsetTopArr.push(contentParts[i].offsetTop);
}
offsetTopArr.push(Infinity);
console.log(typeof offsetTopArr[1])
// 当前所在楼层
var nowfloor = -1;
// 窗口的卷动
window.onscroll=function(){
// 得到当前窗口的卷动值
var scrollTop = document.documentElement.scrollTop;
// 遍历offsetTop数组，判断scrollTop的值位于哪两个楼层之间
for(var i=0;i<offsetTopArr.length;i++){
if(scrollTop>=offsetTopArr[i]&&scrollTop<=offsetTopArr[i+1]){
break;
}
}
// 退出循环的时候i是几就表示当前楼层是几
// 如果当前所在的楼层不是i，表示换楼了
if(nowfloor!=i){
console.log(i);
nowfloor=i;
for(var j = 0 ; j<lis.length ; j++){
if(j==i){
lis[j].className = "current";
}else{
lis[j].className = "";
}
}
}
}
</script>
</body>
</html>15
收起
正在回答 回答被采纳积分+1
1回答
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星