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樣式.