<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
*{
padding: 0;
margin: 0
}
nav{
height: 150px;
display: flex;
position: fixed;
width: 100%;
top: 0
}
nav div{
flex:1;
background: orange
}
.content{
margin-top: 80px
}
.item-content:nth-child(odd){
background: #ccc;
height: 100px;
}
.item-content:nth-child(even){
background: #111;
height: 500px;
}
.tab-active{
color: #f00
}
</style>
</head>
<body>
<div id="app">
<nav id='tab'>
<div class="selected" :class="active==item.id?'tab-item tab-active':'tab-item'" v-for='item in tabList'
:key='item.id'>{{item.name}}</div>
</nav>
<div class="content" ref="content">
<div class="item-content">
<div>11111111</div>
</div>
<div class="item-content">
<div>22222</div>
</div>
<div class="item-content">
<div>33333</div>
</div>
<div class="item-content">
<div>44444</div>
</div>
<div class="item-content">
<div>555555</div>
</div>
</div>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
headerFixed: 1,
active: 1,
tabList: [{
id: 1,
name: '详情'
}, {
id: 2,
name: '评论'
}, {
id: 3,
name: '新闻'
}, {
id: 4,
name: '关于'
}, {
id: 5,
name: '相关'
}],
offsetTop:0
},
mounted() {
//记录每个内容对用的dom数组
this.arrDom = document.getElementsByClassName("item-content");
window.addEventListener('scroll', this.handleScroll);
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
let viewHeight = document.documentElement.clientHeight;
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var contentHeight = document.getElementsByClassName("content")[0].offsetHeight;
var lastHeight = document.getElementsByClassName("item-content")[4].offsetHeight;
var x = viewHeight + scrollTop - this.arrDom[this.arrDom.length-1].offsetHeight - 80;
//首先判断滚动的高度是否是被卷去元素的总高度
var lose = contentHeight -lastHeight;
console.log(lose)
console.log(x)
// allwidth + scrollTop = ;
for (let i = 0; i < this.arrDom.length; i++) {
//因为下面使用到了i+1，所以需要把最后一个分离出来判断
if (x == lose) {
this.active = this.arrDom.length;
}else if (this.arrDom[this.arrDom.length - 1].offsetTop - scrollTop > 150) {
if (this.arrDom[i].offsetTop - scrollTop <= 150 && this.arrDom[i + 1].offsetTop - scrollTop > 150) {
this.active = i + 1
}
}
}
}
}
})
</script>
</body>
</html>
网友评论