【功能实现】Vue3中导航栏效果实现

功能需求：

1. 点击导航后会跳转到相应的页面
2. 当页面在顶部时，导航栏模块背景是透明的
3. 当页面向下滚动超过150px时，导航栏背景为白色

效果实现：

1.准备列表

将导航栏区域的类名设置为动态，即通过判断isTransparent是否存在添加header属性。

通过ul标签实现右侧列表

<header :class="{header: isTransparent}" >
	    <div class="logo"><routerLink to="/home"> ZYX</routerLink></div>
	    <nav class="nav">
	        <ul class="menu">
	            <li><span class=" yy-home"></span> <span>首页</span></li>
	            <li><span class=" yy-message"></span> <span>文章</span></li>
	            <li><span class=" yy-flower"></span> <span>我们</span></li>
				<li><span class=" yy-link"></span> <span>友链</span></li>
				<li><span class=" yy-bear"></span> <span>关于</span></li>
	        </ul>
	    </nav>
	</header>

2.添加路由导航

给每一个li用routerLink进行包括，实现路由跳转功能，添加activeClass="active"属性相当于点击后给对应li添加active类名。

 <li><routerLink to="/home" activeClass="active"><span class=" yy-home"></span> <span>首页</span></routerLink></li>
	            <li><routerLink to="/search" activeClass="active"><span class=" yy-message"></span> <span>文章</span></routerLink></li>
	            <li><routerLink to="/family" activeClass="active"><span class="yy-flower"></span> <span>我们</span></routerLink></li>
				<li><routerLink to="/link" activeClass="active"><span class=" yy-link"></span> <span>友链</span></routerLink></li>
				<li><routerLink to="/about" activeClass="active"><span class=" yy-bear"></span> <span>关于</span></routerLink></li>

3.实现向下滑动是导航栏背景变为白色

import { ref, onMounted, onUnmounted } from 'vue';  
  
    //处理顶部导航栏滚动问题
	const isTransparent = ref(false); // 初始化为false，假设页面加载时用户位于顶部  
	const handleScroll = () => {  
      //设置当前页面在垂直方向已滚动的像素值
	  const scrollTop =  document.documentElement.scrollTop || document.body.scrollTop || 0;  
	  isTransparent.value = scrollTop > 150; // 当向下滚动超过150px时，设置为true（背景透明）
		
	};  

    // 组件挂载后添加滚动事件监听器
   onMounted(() => {  
	  window.addEventListener('scroll', handleScroll);  
	});  
	
    // 组件卸载前移除滚动事件监听器  
	onUnmounted(() => {  
	  window.removeEventListener('scroll', handleScroll);  
	});  

4.扩展：实现向下滚动隐藏导航栏，向上出现导航栏

import { ref, onMounted, onUnmounted } from 'vue';  
  
    //处理顶部导航栏滚动问题
	const isTransparent = ref(false); // 初始化为true，假设页面加载时用户位于顶部  
	 const opacity = ref(1); 
	 let lastScrollY = 350; // 用于存储上一次滚动位置  
	 
	// const handleScroll = () => {  
	// 	//设置当前页面在垂直方向已滚动的像素值
	//   const scrollTop =  document.documentElement.scrollTop || document.body.scrollTop || 0;  

	//   isTransparent.value = scrollTop > 150; // 当向下滚动超过150px时，设置为true（背景透明）
		
	// };  
	
	const handleScroll = (event) => {  
		 let timer: number = 0
		timer && window.clearTimeout(timer)
		timer = window.setTimeout(() => {
	 let currentScrollY = window.scrollY; // 获取当前滚动位置  
	   if ( currentScrollY < lastScrollY) {  
	     // 向上滚动  
	     isTransparent.value = true;  
		 opacity.value=1
	   } else if (currentScrollY > lastScrollY) {  
	     // 向下滚动  
	     // isTransparent.value = true;  
		 opacity.value=0
	   }  
	   lastScrollY = currentScrollY; // 更新上一次滚动位置 
	    }, 100)
	};  
	  
	  // 组件挂载后添加滚动事件监听器
	onMounted(() => {  
	  window.addEventListener('scroll', handleScroll);  
	});  
	  
	  // 组件卸载前移除滚动事件监听器
	onUnmounted(() => {  
	  window.removeEventListener('scroll', handleScroll);  
	});