监听页面滚动事件（以顶部导航栏渐显背景为例

<hNav :class="navActive?'navBg':'navBgNone'"></hNav>

export default {
		data() {
			return {
				navActive:false,
				}
	},
		mounted() {
			//页面滑动的距离
			window.addEventListener('scroll', this.handleScroll);
		
		},
		beforeUnmount() {
			window.removeEventListener('scroll', this.handleScroll);
		},
		methods:{
		// 当前页面滑动切换导航
			 handleScroll() {
			      const scrollPos = window.pageYOffset || document.documentElement.scrollTop;
			      const threshold = 0; // 滚动到顶部的阈值
			      if (scrollPos > threshold) {
			        this.navActive = true; // 滚动超过阈值时
			      } else {
			        this.navActive = false; // 滚动未达到阈值时
			      }
			    },
		}
}

	.navBg{
		@keyframes navBg {
		  0% {
		    background-color: transparent;
		  }
		  100% {
		    background-color: white;
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
		  }
		}
		 background-color: transparent;
		  animation: navBg 0.8s ease-in-out forwards;
		
	}
	.navBgNone{
		@keyframes navBgNone {
		  0% {
			  background-color: white;
			  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
		  
		  }
		  100% {
		     background-color: transparent;
			 box-shadow:none;
		  }
		}
		background-color: white;
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
		  animation: navBgNone 0.8s ease-in-out forwards;
		
	}

页面滚动时组件1，切换为组件2且渐显背景

正好有页面有这个需求，一并写在这里了。

<hNav  v-if="showTitle==2 || navActive" :class="navActive?'navBg':'navBgNone'"></hNav>
		<hNav2  v-if="showTitle==1 && !navActive " :class="navActive?'navBg':'navBgNone'"></hNav2>

其余是一样的。