VUE实现网页中滚动鼠标时导航背景颜色透明度的改变

1、HTML

<div id="topNav" :style="topNavBg">
	这里是导航内容
</div>

2、JS

export default {
	data () {
		return {
			topNavBg: {
        		backgroundColor: ''
      		}
		}
	},
	mounted () {
    	window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
    },
    methods: {
		// 滚动页面时触发导航变色
	    handleScroll () {
	        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
	        // 设置背景颜色的透明度
	        if (scrollTop) {
	            this.topNavBg.backgroundColor = `rgba(19, 23, 130,
	        	${scrollTop / (scrollTop + 60)})` // scrollTop + 多少根据自己的需求设置
	      	} else if (scrollTop === 0) {
	        	this.topNavBg.backgroundColor = 'transparent' // 设置回到顶部时，背景颜色为透明
	      	}
	    },
    	// 滚动之前重置
    	beforeDestroy () {
      		window.removeEventListener('scroll', this.handleScroll)
    	},
	}
}