主要通过监听页面的滚动距离判断距离是否大于吸顶元素的位置 进而添加一个类名使其吸顶
html
<div :class="headerFixed?'issFixed':''" ref="menu">需要吸顶的部分</div>
js
mounted () {
this.$nextTick(() => {
// 获取吸顶元素的dom
const menu = this.$refs.menu
// 吸顶元素到top的距离
this.offsetTop = menu.offsetTop
// 元素自身的高度
this.offsetHeight = menu.offsetHeight
// 监听滚动条
window.addEventListener('scroll', this.handleScroll)
})
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},
data () {
return {
offsetTop: 0,
offsetHeight: 0,
headerFixed: 0}
}
methods: {
handleScroll () {
// 获取页面滚动的距离 兼容写法
const scrollTop = window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop
// 判断页面的滚动距离是否大于吸顶元素的位置
this.headerFixed = scrollTop > this.offsetTop - this.offsetHeight
}
}
}
css
.issFixed {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 4;
}