vue实现当滚轮滑动时 ，到达一定距离改变背景色

vue实现当滚轮滑动时 ，到达一定距离改变背景色

<template>
  <div :style="style" :class="['homeNav', { color: color }]">导航</div>
</template>
<script>
export default {
  data() {
    return {
      style: { backgroundColor: "" },
      color: false,
      scrollTop: 0,
    };
  },
  methods: {
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log("scrollTop.length",scrollTop);

      if (scrollTop >= 300) {
        this.style.backgroundColor = `rgba(0, 150, 224,${
          scrollTop / (scrollTop + 80)
        }) `;
        this.color = true;
      } else if (scrollTop == 0) {
        this.style.backgroundColor = "transparent";
        this.color = false;
      }
      // 轮播  增加动画效果
      //  if (scrollTop > 100) {
      //   $(".popup").addClass("scale-in-center")
      // } else if (scrollTop < 500 || scrollTop > 1100) {
      //    $(".popup").removeClass("scale-in-center")

      // }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>
<style >
body {
  height: 3000px;
}
.color {
  color: #fff !important;
}
.homeNav {
  width: 100%;
  height: 60px;
  color: #333;
  transition: all linear 0.5s;
  position: fixed;
  top: 0;
  z-index: 99999;
  margin: 0 auto;
  background: pink;
}
</style>