vue页面滚动时设置顶部导航背景色

vue yekong

vue外包项目要求页面滚动的时候,顶部导航跟随滚动,但是顶部导航的背景是透明的,这就需要根据距离顶部的距离给一个背景色,背景色随着页面往下滚动逐渐加深,网上滚动逐渐透明

<div class="pageHeader" :style="'background:'+ background">
</div>
mounted() {
    window.addEventListener('scroll', this.getScrollInfo, true)
},
methods: {
    getScrollInfo() {
      this.top = window.pageYOffset
      console.log('滚动高度', window.pageYOffset)
    },
},
computed: {
    background: function () {
      return 'rgba(0, 0, 0,' + this.top * 0.001 + ')'
    }
},
data() {
    return {
      top: 0
    }
}
喜欢