appH5页面bar透明下滑渐变，监听滚动

vue工程采用vant插件（使用vant插件书写app页面还是不错的）
是插件的一个吸顶bar

<template>
   <van-nav-bar
      title="首页"
      @click-left="showMenu"
      fixed
      :style="navbarStyle"
    >
    </template>
<script>
export default {
  name: "",
  data() {
    return {
      navbarStyle:{'background-color':'rgba(58,121,218,0)!important'},
    };
  },
  activated() {
    this.navbarStyle = {'background-color':'rgba(58,121,218,0)!important'}
    window.addEventListener('scroll',this.windowScroll)//添加监听窗口滚动
  },
  deactivated(){
      window.removeEventListener('scroll',this.windowScroll)//删除窗口滚动
  },
  destroyed(){
      window.removeEventListener('scroll',this.windowScroll)//删除窗口滚动
  },
  created(){
      this.navbarStyle = {'background-color':'rgba(58,121,218,0)!important'}
      window.addEventListener('scroll',this.windowScroll)//添加监听窗口滚动
  },
  methods: {
    windowScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let opacity = Math.abs(Math.round(scrollTop)) / 250;
        this.navbarStyle = {'background-color': `rgba(58,121,218,${opacity})!important`}//调整透明的
    },
  },
};
</script>

本人主栈后端，也在学习的路上，希望共同成长！理解不对的请指教。如果您绝的有用请帮我点个赞谢谢了。