源码:
<template>
<div class="container">
<div class="container-block">
<div class="container-box contentBox1">一楼</div>
<div class="container-box contentBox2">二楼</div>
<div class="container-box contentBox3">三楼</div>
<div class="container-box contentBox4">四楼</div>
<div class="container-box contentBox5">五楼</div>
<div class="container-box contentBox6">六楼</div>
</div>
<ul>
<li :class="!item.select || 'li-select'" v-for="(item, index) in storey" :key="index">{{item.name}}</li>
<li @click="BackToTop">顶部</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
storey: [
{
name: '一楼',
select: true
},
{
name: '二楼',
select: false
},
{
name: '三楼',
select: false
},
{
name: '四楼',
select: false
},
{
name: '五楼',
select: false
},
{
name: '六楼',
select: false
}
]
}
},
mounted() {
// 获取页面滚动的高度
window.addEventListener('scroll', this.handleScroll, true)
},
methods: {
BackToTop () {
document.body.scrollTop = document.documentElement.scrollTop = 0;
},
handleScroll(e) {
let top = e.srcElement.scrollingElement.scrollTop / 350; // 获取页面滚动高度
top = parseInt(top)
this.storey.forEach(element => {
if (this.storey[top].name === element.name) {
element.select = true
} else {
element.select = false
}
});
}
}
}
</script>
<style>
.container-box {
height: 500px;
width: 80%;
}
.contentBox1 {
background-color:antiquewhite;
}
.contentBox2 {
background-color:aqua ;
}
.contentBox3 {
background-color:aquamarine;
}
.contentBox4 {
background-color:chartreuse;
}
.contentBox5 {
background-color:brown;
}
.contentBox6 {
background-color:cadetblue;
}
ul {
width: 20%;
min-width: 100px;
position: fixed;
right: 0;
top: 30%;
}
ul li {
border: 1px solid #000;
height: 50px;
}
ul .li-select {
color: #f00;
}
</style>
效果图: