需求
网页左右布局,左侧内容右侧菜单,当内容滚动时右侧菜单项高亮,点击锚点菜单同样可以定位内容
结构
<div class="container">
<div class="list">
<div class="item" id='1'>1</div>
<div class="item" id='2'>2</div>
<div class="item" id='3'>3</div>
<div class="item" id='4'>4</div>
<div class="item" id='5'>5</div>
<div class="item" id='6'>6</div>
</div>
<div class="menu">
<div><a href="#1">item 1</a></div>
<div><a href="#2">item 2</a></div>
<div><a href="#3">item 3</a></div>
<div><a href="#4">item 4</a></div>
<div><a href="#5">item 5</a></div>
<div><a href="#6">item 6</a></div>
</div>
</div>
样式
.container {
display: flex;
align-items: flex-start;
}
.list {
flex: 1;
}
.item {
background-color: #d7d7d7;
border-radius: 10px;
height: 500px;
width: 500px;
margin-bottom: 20px;
padding: 20px;
}
.menu {
border-left: 1px solid #d7d7d7;
padding-left: 15px;
font-size: 14px;
color: #d7d7d7;
position: sticky;
top: 30px;
}
a {
color: #d7d7d7;
}
a.active {
color: #f00;
}
可以将右侧菜单设施sticky定位,滚动时可以固定
事件
window.onscroll = function () {
//scrollTop就是触发滚轮事件时滚轮的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log("滚动距离" + scrollTop);
const list = document.querySelectorAll('a');
if (scrollTop < 510) {
list.forEach(item => {
item.classList = [];
})
list[0].classList.add('active')
} else if (scrollTop > 550 && scrollTop < 1090) {
list.forEach(item => {
item.classList = [];
})
list[1].classList.add('active')
} else if (scrollTop > 1090 && scrollTop < 1645) {
list.forEach(item => {
item.classList = [];
})
list[2].classList.add('active')
} else if (scrollTop > 1645 && scrollTop < 2210) {
list.forEach(item => {
item.classList = [];
})
list[3].classList.add('active')
} else if (scrollTop > 2210 && scrollTop < 2780) {
list.forEach(item => {
item.classList = [];
})
list[4].classList.add('active')
} else if (scrollTop > 2780) {
list.forEach(item => {
item.classList = [];
})
list[5].classList.add('active')
}
}
这里用了笨方法,自己滚动浏览器获取到的左侧内容的高度,然后判断给右侧菜单项目加高亮而已