获取当前鼠标(手指)位置距离页面顶部的位置
const scrollTop =
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
根据你需要吸顶的标签,在该标签上通过属性ref进行获取元素距离顶部的高度
<div class="wrap" ref="topLabel" :class="showTopTitle ? 'text' : 'dispaly'"></div>
在方法里通过下面方法进行获取需要吸顶元素距离顶部的高度
this.$refs.topLabel.offsetTop
在data()对showTopTitle进行默认赋值为false,不显示
还需要在mounted里面进行事件监听
window.addEventListener('scroll', this.scrollToTop(), true )
然后在scrollToTop()方法中进行位置的比较
scrollToTop() {
if (scrollTop > this.$refs.topLabel.offsetTop) {
this.showTopTitle = true
} else {
this.showTopTitle = false
}
}
在CSS中对动态绑定得class添加属性(根据业务需求进行自行添加,如下举例)
.text {
position: fixed;
position: -webkit-fixed;
top: 0;
z-index: 10;
}
.dispaly {
display: none;
}
最后别忘了销毁监听事件呦
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
}