vue 监听滚动事件 实现固定在顶部或者元素显示与否

需求：当页面滚动到距离顶部175px的时候，页面导航栏固定在顶部

效果图

1. 监听滚动事件

在mounted钩子中给window添加一个滚动监听事件

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

然后在method方法中，添加这个handleScroll方法

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

控制台打印结果：

2. 监听元素到顶部的距离，并判断滚动的距离如果大于了元素到顶部的距离时，设置needFixed为true，否则就是false

method: {
  handleScroll() {
    let self = this
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
   console.log(scrollTop)
   if (scrollTop > 175) {
      self.needFixed = true;
   } else {
      self.needFixed = false;
   }
  }
}

3. 为该元素写一个固定在顶部的样式，主要是外层，内层数据自己定义

.hasFixed {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   z-index: 1000; //视情况而定，需不需要
}

4. 将需要固定的元素的class和needFixed进行绑定，如果needFixed为true时，就应用这个hasFixed样式

<div :class="{'hasFixed': needFixed == true}">
  sdsdsds
</div>

5. 离开该页面时，需要移除这个监听的事件，不然会报错

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

备注：

• 如果组件需要进行滚动固定，在组件中进行上述的操作即可，方法名不能与其他滚动方法名一样。
• 一个页面引入多个组件，组件有滚动事件监听，并且页面内部有滚动事件监听，不会互相影响