VUe2--吸顶容器--背景色动态变化

效果图：

屏幕无滚动时，搜索栏透明，能看见轮播图

屏幕向下小幅度滚动： 吸顶容器从透明 --> 若隐若现

屏幕向下大幅度滚动：吸顶容器完全显现

代码：

顶部吸顶容器标签 -- 实现吸顶容器及其内部的字体的颜色变化

 吸顶容器盒子绑定 changeStyle ，随着屏幕滚动实时改变背景透明度，颜色也可以改变，但是这里的业务并不需要，所以如果想要改变可以在方法内使用局部变量更改返回的 rgba 值。 

export default {
    data() {

      return {

              // 控制 opcity 透明度
              percent: 0,
              // 吸顶容器背景渐变
              changeStyle: {},
    
         }
    },

    methods:{

        // 改变吸顶容器背景色
        watchScrollColor () {
              // 滚动距离
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop                 
             || document.body.scrollTop
      
       //  当导航栏滚动距离大于头部图片高度实现吸顶效果
      if (scrollTop > 10) {
        // 为导航栏加上动态style，实现透明度随滚动改变，并且吸顶改变导航栏样式
        this.percent = scrollTop / 200
        this.changeStyle = { background: `rgba(216, 30, 6,${this.percent})` }
      } else {
        this.changeStyle = 1
      }
    }
  },

  // 生命周期-页面挂载完成
  mounted () {
    // 页面加载完成且滚动时，监听watchScroll 方法
    window.addEventListener('scroll', this.watchScrollColor)
  }

}