思路分析
1.首先点击左边侧边栏 四个盒子中的一个时,'右边对应的编号的盒子'此时顶部到网页的垂直距离等于此时鼠标下滑的距离
也就是 此时
document.document.scrollTop = div.offsetTop
左侧盒子存在类名,使用排他思想的狙击枪思想,指定元素去除类名,给被点击的元素加上类名
let itemList = document.querySelectorAll('.aside>.item')
let contentList = document.querySelectorAll('.content>.neirong')
for (let i = 0; i < itemList.length; i++) {
itemList[i].onclick = function () {
document.querySelector('.aside>.active').classList.remove('active')
itemList[i].classList.add('active')
// 点击左侧哪个盒子时 鼠标滚动的距离 等于 右边对应的盒子的顶部到网页的距离
document.documentElement.scrollTop = contentList[i].offsetTop
}
}
2.现在对右边盒子进行分析
- 当鼠标滑动的距离小于等于当前最近的一个盒子顶部到网页顶部的距离的时候
左边侧边栏被选中的盒子编号等于此时右边对应的盒子
// 鼠标滑动的距离小于等于当前盒子顶部到网页的距离时 左边的盒子对应右边的盒子
// 对每个盒子遍历一次 每当有满足的条件时 直接断开 待下一次滑动到别的位置时再次进行新的循环遍历
window.onscroll = function () {
for (let j = 0; j < contentList.length; j++) {
if (document.documentElement.scrollTop <= contentList[j].offsetTop) {
document.querySelector('.aside>.active').classList.remove('active')
itemList[j].classList.add('active')
break // 注意断开 不然会被其他情况影响 因为循环会一直进行
}
}
}
最终效果大致如图:
