本教程详细讲解如何使用javascript实现一个动态菜单，使其在用户向上滚动页面时显示，向下滚动时隐藏。文章通过比较当前和前一个滚动位置来判断滚动方向，并结合dom操作，提供清晰的代码示例和实现细节，帮助开发者轻松创建响应用户滚动行为的导航栏。
引言：动态导航栏的用户体验优化
在现代网页设计中，导航栏是用户与网站交互的核心元素。为了优化用户体验，尤其是在移动设备或内容丰富的长页面上，一种常见的模式是根据用户的滚动行为动态显示或隐藏导航栏。当用户向下滚动浏览内容时，导航栏可以隐藏以提供更大的阅读空间；而当用户向上滚动时，通常意味着他们可能需要访问导航功能，此时导航栏应重新出现。这种交互模式能够有效提升页面的内容可见性和整体用户体验。
本教程将详细介绍如何利用JavaScript监听滚动事件，并结合CSS来精确控制导航菜单的显示与隐藏，实现“向上滚动显示，向下滚动隐藏”的动态效果。
核心原理：判断页面滚动方向
实现动态菜单的关键在于准确判断用户的滚动方向。我们可以通过以下步骤来完成：
- 记录上一次的滚动位置： 在每次滚动事件触发时，保存当前页面的垂直滚动位置。
- 获取当前的滚动位置： 在下一次滚动事件触发时，获取新的垂直滚动位置。
-
比较位置：
- 如果当前滚动位置大于上一次的滚动位置，则表示用户正在向下滚动。
- 如果当前滚动位置小于上一次的滚动位置，则表示用户正在向上滚动。
JavaScript中，可以通过 window.pageYOffset 或 document.documentElement.scrollTop（针对旧版浏览器兼容性）来获取页面的垂直滚动位置。
实现步骤与代码示例
我们将通过一个简单的HTML结构、基础CSS样式以及核心JavaScript逻辑来构建这个动态菜单。
1. HTML结构准备
首先，创建一个包含导航菜单的头部区域 (#top-content) 和模拟页面内容的区域 (#content)。
<!DOCTYPE html>
<html>
<head>
<title>动态菜单示例</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="top-content" class="palette-1">
<div id="logo">
@@##@@
</div>
<ul id="iconmenu" class="nav-menu">
<li class="title">Coffee</li>
<li class="title">Tea</li>
<li class="title">Milk</li>
</ul>
</div>
<div id="content" class="palette-2">
<!-- 模拟大量内容以产生滚动条 -->
<p>页面内容区域</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>滚动查看效果...</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>更多内容...</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>继续滚动...</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>页面底部</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1713" title="Q.AI视频生成工具"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680315554756.png" alt="Q.AI视频生成工具" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1713" title="Q.AI视频生成工具">Q.AI视频生成工具</a>
<p>支持一分钟生成专业级短视频，多种生成方式，AI视频脚本，在线云编辑，画面自由替换，热门配音媲美真人音色，更多强大功能尽在QAI</p>
</div>
<a href="/ai/1713" title="Q.AI视频生成工具" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
<div id="footer" class="palette-4">
footer
</div>
<script src="script.js"></script>
</body>
</html>2. CSS样式基础
为导航栏设置固定定位，使其始终位于页面顶部，并为内容区域设置 margin-top 以避免被导航栏遮挡。
body {
margin: 0;
font-family: sans-serif;
color: #333;
}
.palette-1 { background-color: #83B2FF; }
.palette-2 { background-color: #8BF18B; }
.palette-4 { background-color: #FF8650; }
#top-content {
position: fixed; /* 固定定位 */
top: 0;
left: 0;
width: 100%;
height: 50px; /* 导航栏高度 */
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 1000;
/* 初始状态为可见 */
display: block;
}
#top-content img {
height: 40px;
width: auto;
}
ul.nav-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.nav-menu > li {
display: inline-block;
padding: 0 15px;
line-height: 50px;
color: white;
cursor: pointer;
}
ul.nav-menu > li:hover {
background-color: #2779BF;
}
#content {
margin-top: 50px; /* 确保内容不被固定导航栏遮挡 */
padding: 20px;
min-height: 200vh; /* 确保页面有足够的滚动空间 */
background-color: #f0f0f0;
}
#footer {
padding: 20px;
background-color: #FF8650;
color: white;
text-align: center;
}3. JavaScript逻辑编写
核心的JavaScript逻辑将监听 window 的 scroll 事件，并根据滚动方向来改变 #top-content 的 display 属性。为了避免在页面顶部轻微滚动时菜单立即隐藏，我们引入一个 scrollThreshold。
// script.js
window.onscroll = function() {
scrollFunction();
};
// 用于存储上一次的滚动位置
let lastScrollTop = 0;
// 获取导航栏元素
const headerElement = document.getElementById('top-content');
// 定义一个滚动阈值，向下滚动超过此值才隐藏菜单
const scrollThreshold = 50;
function scrollFunction() {
// 获取当前滚动位置，兼容不同浏览器
const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (currentScrollTop > lastScrollTop && currentScrollTop > scrollThreshold) {
// 用户向下滚动，并且已经超过了初始的滚动阈值
headerElement.style.display = 'none'; // 隐藏导航栏
} else if (currentScrollTop < lastScrollTop) {
// 用户向上滚动
headerElement.style.display = 'block'; // 显示导航栏
}
// 更新上一次的滚动位置
lastScrollTop = currentScrollTop;
}完整代码示例
将上述HTML、CSS和JavaScript代码分别保存为 index.html, style.css 和 script.js，并在浏览器中打开 index.html 即可看到效果。
优化与注意事项
-
平滑过渡效果： 直接修改 display 属性会导致菜单瞬间出现或消失，缺乏动画效果。为了实现更流畅的用户体验，建议使用CSS的 transition 属性结合 transform: translateY() 或 opacity 来控制菜单的显示与隐藏。
-
CSS修改示例：
#top-content { /* ... 其他样式 ... */ transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* 添加过渡效果 */ transform: translateY(0); /* 默认显示 */ opacity: 1; /* 默认不透明 */ } #top-content.hidden { /* 定义一个隐藏状态的类 */ transform: translateY(-100%); /* 向上移动100%自身高度，使其不可见 */ opacity: 0; /* 完全透明 */ } -
JavaScript修改示例：
function scrollFunction() { const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop; if (currentScrollTop > lastScrollTop && currentScrollTop > scrollThreshold) { headerElement.classList.add('hidden'); // 添加隐藏类 } else if (currentScrollTop < lastScrollTop) { headerElement.classList.remove('hidden'); // 移除隐藏类 } lastScrollTop = currentScrollTop; }通过这种方式，菜单会以动画形式滑入或滑出，视觉效果更佳。
-
性能考量： scroll 事件在用户滚动时会频繁触发，可能导致性能问题。对于复杂的页面或动画，可以考虑使用节流（throttle）或防抖（debounce）技术来限制事件处理函数的执行频率，以优化性能。
兼容性： window.pageYOffset 是标准的获取滚动位置的方法。对于一些旧版IE浏览器，可能需要使用 document.documentElement.scrollTop 或 document.body.scrollTop。在现代浏览器中，window.pageYOffset 通常是首选。
-
用户体验细节：
- 初始状态： 考虑页面加载时菜单的初始状态。通常是可见的。
- 页面顶部： 当用户滚动到页面顶部时，即使是向下滚动，菜单也应该显示。上述代码中的 currentScrollTop > scrollThreshold 已经考虑了这一点。
- 其他交互： 菜单隐藏后，用户是否能通过其他方式（例如，点击一个小的指示器）手动唤出菜单？这取决于具体的设计需求。
总结
通过本教程，我们学习了如何利用JavaScript监听页面滚动事件，并通过比较滚动位置来判断滚动方向。结合简单的CSS样式，我们成功实现了一个在向上滚动时显示、向下滚动时隐藏的动态导航菜单。通过引入CSS过渡效果和考虑性能优化，可以进一步提升用户体验。这种技术广泛应用于各种现代网站，为用户提供了更加流畅和直观的导航体验。
