vue中使用滚动判断 实现吸顶

1.监听元素到顶部的距离 并判断滚动的距离如果大于了元素到顶部的距离时，为元素添加 isFixed的class
mounted() { // handleScroll为页面滚动的监听回调 window.addEventListener(‘scroll’, this.handleScroll); },
handleScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
var offsetTop = document.getElementById(‘bar’).offsetTop
if (scrollTop > offsetTop) {
this.barFixed = true
} else {
this.barFixed = false
}
}

.isFixed{
position:fixed;
background-color:#Fff;
top:0;
z-index:999;
}

如果离开页面需要移除这个监听的事件

destroyed () {
window.removeEventListener(‘scroll’, this.handleScroll)
}