在当前页面中，如果内容向上或者向下进行滚动时，页面导航中的标题对应页面滚动的模块区域内进行高亮显示，或者点击导航某一个内容标题时，页面会滚动定位到对应标题内容区域
话不多说，先上代码，末尾说我的思路
<template>
<div class="wrapper">
//这里是右侧页面内容区域
<div class="right_content">
<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
</div>
//这里是左侧导航
<div class="right_content">
<p v-for="(item,index) in titleList" :key="index" :class={
'activeTitle':isActive==index}"
@click="scrollIndex(index,item.id)">{
{
item.title}}</p>
</div>
</div>
</template>
<script>
export default{
data() {
return {
//这里是定义左侧导航模块的数据，以id和title为例
titleList: [{
id: 'block1',
title: '模块1'
},
{
id: 'block2',
title: '模块2'
},
{
id: 'block3',
title: '模块3'
},
],
isActive: null,
block_one: '',
block_two: '',
block_three: '',
bodyHeight: 0,
}
},
watch: {
bodyHeight: {
handler(newVal) {
if (newVal >= this.block_one) {
this.isActive = 0
}
if (newVal >= this.block_two) {
this.isActive = 1
}
if (newVal >= this.block_three) {
this.isActive = 2
}
if (newVal >= this.block_four) {
this.isActive = 3
}
if (newVal == 0) {
this.isActive = null
}
},
immediate: true,
deep: true
}
},
mounted(){
window.addEventListener("scroll", this.windowScroll);
//先获取右侧内容区域每个模块的高度
this.block_one = document.getElementById('block1').offsetTop
this.block_two = document.getElementById('block2').offsetTop
this.block_three = document.getElementById('block3').offsetTop
},
methods:{
scrollIndex(val, id) {
this.isActive = val
this.$nextTick(() => {
let targetbox = document.getElementById(id)
let height = targetbox.offsetTop
document.documentElement.scrollTop = height
})
},
windowScroll() {
this.bodyHeight = document.documentElement.scrollTop || document.body.scrollTop
},
},
destroyed() {
//销毁上面监听的滚动事件
window.removeEventListener("scroll", this.windowScroll);
},
}
</script>
<style scoped>
.activeTitle {
color: orange;
}
样式大家就根据自己的需求写 这里就不展示了
</style>
思路：
首先是在mounted中定义监听到我们页面滚动的事件windowScroll（这里的监听务必记得销毁），然后根据我们页面元素一次定义ID（block1,block2,block3），这里实现点击标题，页面滚动到对应模块区域则是在标题的点击事件中scrollIndex中，根据ID获取当前模块元素的高度，然后使页面的高度等于刚才获取元素的整体高度。
其次是实现页面自由滚动，左侧导航的标题也随之改变。需要借助watch监听页面高度以及最开始我们定义监听页面滚动事件进行结合。监听页面的高度bodyheight，并判断滑动的区域的高度是在我们页面中某个元素块的高度范围内时，则active就等与它。这里的active和下标Index相结合就可以(html结构中有动态绑定class)。
这个版本是一个很简单的版本，针对小页面，过几天我会写一个页面中全部都是动态获取的数据和元素块并携带模块请求数据