vue监听滚动事件-元素固定位置显示

 

1、监听滚动事件

用VUE写一个在控制台打印当前的scrollTop用来测试是否执行：

mounted () {
  window.addEventListener('scroll', this.handleScroll)
}

methods:  {
  handleScroll () {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    console.log(scrollTop)
  }
}

 

2、监听元素到顶部的距离  并判断滚动的距离如果大于了元素到顶部的距离时，为元素添加 isFixed的class

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

 

<div :class="{isFixed: barFixed}"></div>

 

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

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

 

总结：整体思路为监听滚动距离是否大于元素到顶部的距离，来判断是否为元素添加固定css样式.