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

最新推荐文章于 2023-06-13 23:32:51 发布

sunly_

最新推荐文章于 2023-06-13 23:32:51 发布

阅读量3.1k

点赞数 3

分类专栏： vue2

本文链接：https://blog.csdn.net/qq_40745143/article/details/106543945

版权

vue2 专栏收录该内容

71 篇文章 10 订阅

订阅专栏

<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>