VUE3 实时监听页面滚动高度 ，改变nav/title的 透明度

VUE3 实时监听页面滚动高度 ，改变nav/title的 透明度（分享写法，记录）

data

data() {
    return {
      scroll: "",
      percent: "",
    };
  },

mounted

mounted() {
    window.addEventListener("scroll", this.menu);
  },

computed

computed: {
    changeColor() {
     let  percent= this.percent;
      return {
        'background-color':`rgba(109,165,255, ${percent})`,
      };
    },
  },

methods

methods: {
    menu() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.scroll < 250) {
        this.percent = (this.scroll / 250);
      } else {
        this.percent = 1;
      }
    },
  },

html

 <div class="title" id="title" :style="changeColor" \>