vue 顶部栏随页面滚动背景渐变

写仿网易云音乐移动端的时候感觉挺好的

第一步：先监听页面滚动，再方法定义使用

  methods: {
    // 在方法中，添加这个handleScroll方法来获取滚动的位置
    handleScroll () {
      const scrollTop =
      window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
  },

第二步：给变化的元素绑定backgroundColor属性，再在data中定义

 <div class="itemMusicTop" :style="{backgroundColor:backgroundColor}">

 data () {
    return {
      backgroundColor: ''
    }
  },

第三步：使用滑动监听函数来改变背景颜色

 this.backgroundColor = `rgba(0, 0, 0,${scrollTop / (scrollTop + 40)})`

scrollTop 是页面监听到到组件的滚动位置，当组件滚动的时候，scrollTop 的值就会改变

前三个值（红绿蓝）的范围为0到255之间的整数，根据个人自行更改，有需要也改变rgb的值实现滑动渐变，道理同上，第四个值为透明度同opacity 属性一样

优化：页面回到了顶部，也就是说 scrollTop 为0的时候，将backgroundColor重置为 transparent

最终代码

  methods: {
    // 在方法中，添加这个handleScroll方法来获取滚动的位置
    handleScroll () {
      const scrollTop =
      window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 // 设置背景颜色的透明读
      if (scrollTop) {
        this.backgroundColor = `rgba(0, 0, 0,${scrollTop / (scrollTop + 40)})`
      } else if (scrollTop === 0) {
        this.backgroundColor = 'transparent'
      }   
 }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
  }, 
//由于是在整个window中添加的事件，所以要在页面离开时摧毁掉，否则会报错
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  }