移动端实现页面滑动，顶部栏渐进变透明或变颜色

1.先监听页面滚动

created() {
  window.addEventListener("scroll", this.handleScroll);
},
destroyed() {
  window.removeEventListener("scroll", this.handleScroll, true);
},

2.handleScroll方法

handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let pre =
        scrollTop / this.tagOffsetTop > 1 ? 1 : scrollTop / this.tagOffsetTop;
      let colorNum = (1 - pre) * 255;
      this.icoColor = `rgba(${colorNum},${colorNum},${colorNum},1)`; // 图标颜色渐变
      this.textOpacity = pre;  //透明度渐变，可以文字或背景色
    },

3.dom结构

<header
      class="homeHeader"
      :style="{
        color: icoColor,
        'background-color': `rgba(255,255,255,${textOpacity})`,
      }"
    >
      <strong :style="{ opacity: textOpacity }">测试头部</strong>
</header>

4.如果需要滚动到具体的div处，比如class名称为tab处可以先获取offsetTop距离顶部高度

let offsetTop = document.querySelector("tab").offsetTop;

完毕