Vue 实现页面滑动顶部固定栏背景渐变

经常可以在一些APP上看到下面的效果

思路：
要实现这个功能，第一步就是要监听页面的滚动，直接上代码！

  mounted() {
    //首先，在mounted钩子window添加一个滚动滚动监听事件
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    //然后在方法中，添加这个handleScroll方法来获取滚动的位置
    handleScroll() {
      let scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      let offsetTop = document.querySelector("#searchBar").offsetTop;
    }
  },
  //由于是在整个window中添加的事件，所以要在页面离开时摧毁掉，否则会报错
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  }

上面的代码中实现了监听一个id为 searchBar 的元素的滚动位置，这样可以完成了第一步。

第二步就是给页面添加改变事件；
在项目中使用的是 Vant 的 搜索组件，所以我直接给它绑定了一个 background属性，如果是其他的组件也同理。

<van-search
          placeholder="输入公司或职位"
          @blur="onBlur"
          @focus="onFocus"
          show-action
          :background="backgroundColor"
          shape="round"
        >
          <div slot="action">搜索</div>
</van-search>

给组件绑定背景颜色属性之后，下面就需要使用滑动监听函数来改变背景颜色。

//设置背景颜色的透明度
      if (offsetTop && scrollTop) {
        this.backgroundColor = `rgba(255, 255, 255,${scrollTop / (scrollTop + 40)})`;
      }

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

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

这个是动态的将 backgroundColor 属性进行设置改变。

前三个值（红绿蓝）的范围为0到255之间的整数。如果你最终想要将背景变为其他颜色，那么你可以在上面写上对应的 rgb 颜色的数值，现在重点说一下 rgba 的最后一个值。

第四个值，alpha值，制订了色彩的透明度/不透明度，它的范围为0.0到1.0之间，0.5为半透明。 也就相当于 css 中的 opacity 属性。 rgba(255,255,255,0)则表示完全透明的白色； rgba(255,255,255,1)则表示完全不透明的白色，就相当于本色；颜色值可以根据对应的值来设置。

${scrollTop / (scrollTop + 40)}

但是但是但是。。。。

在多次进行滑动的时候，发现了一个问题

在页面快速滑动的时候，到后面出现了 bug ，顶部搜索栏在页面没有向上滑动的情况下，还是显示了背景，这样的结果，无疑是让人痛恨的。那怎么办呢，

在页面向上滚动过快的时候，也就是回到原点的时候，应该将背景颜色设置为原来的属性，即

 //设置背景颜色的透明读
      if (offsetTop && scrollTop) {
        this.backgroundColor = `rgba(255, 255, 255,${scrollTop / (scrollTop + 40)})`;
      } else if (scrollTop == 0) {
        this.backgroundColor = "transparent";
      }

当页面回到了顶部，也就是说 scrollTop 为0的时候，将backgroundColor重置为 transparent ，就这样，这个效果就完全实现了。

下面放全部代码?

mounted() {
    //首先，在mounted钩子window添加一个滚动滚动监听事件
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    //然后在方法中，添加这个handleScroll方法来获取滚动的位置
    handleScroll() {
      let scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      let offsetTop = document.querySelector("#searchBar").offsetTop;

      //设置背景颜色的透明读
      if (offsetTop && scrollTop) {
        this.backgroundColor = `rgba(255, 255, 255,${scrollTop / (scrollTop + 40)})`;
      } else if (scrollTop == 0) {
        this.backgroundColor = "transparent";
      }
    }
  },
  //由于是在整个window中添加的事件，所以要在页面离开时摧毁掉，否则会报错
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  }