一个问题
# 具体遇到的问题
我这个拉不到最后的栏目里，但是打开控制台又能拉下去，这个问题可以怎么解决吗？而且我这个点击和颜色的改变也对不上，我点击体育，确实跳转到体育了，但右边的体育导航条却没有变成紫色，如图，这是为什么？我就感觉这样写很有问题。。。我明明和老师一样写的是
scroll>=offsetArr[i]&&scroll<=offsetArr[i+1],为什么我点击却没作用，后又敲了两遍，每个栏目的高度都是随便设的，但都有同样的问题。
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.content-part {
width: 676px;
background-color: gray;
margin: 0px auto;
margin-bottom: 10px;
font-size: 60px;
}
ul {
width: 100px;
height: 500px;
background-color: orange;
position: fixed;
right: 10px;
top: 50%;
margin-top: -250px;
}
ul li {
width: 100px;
height: 90px;
margin-bottom: 10px;
font-size: 30px;
cursor: pointer;
text-align: center;
list-style: none;
line-height: 90px;
}
ul li.current {
background-color: purple;
color: aliceblue;
}
</style>
</head>
<body>
<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>
<section class="content-part" style="height: 674px;" data-n="科技">
科技栏目
</section>
<section class="content-part" style="height: 567px;" data-n="体育">
体育栏目
</section>
<section class="content-part" style="height: 739px;" data-n="新闻">
新闻栏目
</section>
<section class="content-part" style="height: 274px;" data-n="娱乐">
娱乐栏目
</section>
<section class="content-part" style="height: 894px;" data-n="视频">
视频栏目
</section>
<script>
//获取列表的节点
var list = document.getElementById('list');
var contents = document.querySelectorAll('.content-part');
var lis = document.querySelectorAll('#list li')
//事件委托
list.onclick = function(e) {
if(e.target.tagName.toLowerCase()=='li') {
//获取列表项中的data-n的值
var n = e.target.getAttribute('data-n');
//寻找data-n值相同的栏目
var contentPart = document.querySelector('.content-part[data-n='+n+']');
//将此栏目的offsetTop值传给document.documentElement.scrollTop
document.documentElement.scrollTop = contentPart.offsetTop;
}
}
//第一步，获取所有栏目的offsetTop并推入一个数组
//第二部，添加浏览器卷动事件，并将卷动的距离与数组中固定好用来测量的距离进行比对，判断在哪一个楼层，然后对该楼层的导航条进行交互设置
var offsetArr = [];
//节流锁
var nowfloor = -1;
for(var i=0;i<contents.length;i++) {
offsetArr.push(contents[i].offsetTop);
}
offsetArr.push(Infinity);
// console.log(offsetArr);
window.onscroll = function() {
var scroll = document.documentElement.scrollTop;
for(var i=0;i<offsetArr.length;i++) {
if(scroll>=offsetArr[i]&&scroll<=offsetArr[i+1]) {
break;
}
}
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>
正在回答
同学你好， 记得调整最后一个section标签的高度，方便看到效果。
换成IE浏览器测试是可以的，可能是浏览器缓存的问题，可以清除Chrome浏览器缓存再测试下。
如果还有问题，可以将你修改后的代码粘贴过来，老师帮助同学再测试下，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星