<script>
var list = document.getElementById('list');
var lis = document.querySelectorAll('#list li');
list.onclick = function(e) {
if (e.target.tagName.toLowerCase() == 'li') {
var n = e.target.getAttribute('data-n');
var contentPart = document.querySelector('.content-part[data-n=' + n + ']');
document.documentElement.scrollTop = contentPart.offsetTop;
}
}
var offsetTopArr = [];
var contentParts = document.querySelectorAll('.content-part');
for (var i = 0; i < contentParts.length; i++) {
offsetTopArr.push(contentParts[i].offsetTop);
}
offsetTopArr.push(Infinity);
console.log(offsetTopArr);
var nowFloor = -1;
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop;
console.log(scrollTop);
for (var i = 0; i < offsetTopArr.length; i++) {
if(scrollTop >= offsetTopArr[i] && scrollTop < offsetTopArr[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>
是跟着视频中老师得到代码写的,字数太多不支持,所以只复制了script部分
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星