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)
}