vue监听页面滚动，动态修改导航条颜色，过渡效果

<template>
	<div class="header" :style="style">
	</div>
</template>

<script>
	export default {
		data() {
			return {
				style: {},
				opacity: 0,
			}
		},
		mounted() {
			window.addEventListener("scroll", this.windowScroll); //监听页面滚动
		},
		methods: {
			windowScroll() {
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				this.opacity = Math.abs(Math.round(scrollTop)) / 250;
				this.style = {background: `rgba(0, 0, 0,${this.opacity})`}
			},
		},
		destroyed() {
			window.removeEventListener("scroll", this.windowScroll); //销毁滚动事件
		}
	}
</script>