顶部导航向下滑动变色

HTML部分

<template>
<div class="app">
    <div class="header" :style="headStyle" >
</div>
</div>
</template>

JavaScript部分 

<script>
export default {
  data() {
    return {
      headStyle: {
        background: "rgba(0,0,0,0)",
      },
    };
  },
  mounted() {
    window.addEventListener("scroll", this.watchScroll); //监听页面滚动
  },
  methods: {
    // 页面移动导航栏改变颜色
    watchScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      console.log(scrollTop); //打印移动距离
      //设置背景颜色的透明度进行判断
      if (scrollTop) {
        this.headStyle.background = `rgba(0,0,0,${
          scrollTop / (scrollTop + 8)
        })`;
      } else if (scrollTop == 0) {
        this.headStyle.background = `rgba(0,0,0,0)`;
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.watchScroll);
  },
};
</script>