本文介绍如何通过监听页面滚动事件，动态控制导航栏的显示与隐藏，并在滚动后固定其位置，适用于现代响应式网站设计。
本文介绍如何通过监听页面滚动事件，动态控制导航栏的显示与隐藏，并在滚动后固定其位置，适用于现代响应式网站设计。
实现“滚动后显现并固定”的导航栏（如 susodigital.com 所示），核心在于利用原生 JavaScript 监听 scroll 事件，并根据滚动偏移量（window.scrollY）动态切换导航栏的 CSS 类名。这种方式轻量、兼容性好，无需依赖第三方库。
✅ 基础 HTML 结构
<nav id="mainNav" class="navbar"><div class="nav-container">
<a href="/" class="logo">Logo</a>
<ul class="nav-list">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
? 关键 CSS 样式（含初始隐藏 + 滚动后激活）
.navbar {
position: fixed;
top: -80px; /* 初始隐藏：上移自身高度 */
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
transition: top 0.3s ease, box-shadow 0.3s ease;
z-index: 1000;
}
.navbar.active {
top: 0; /* 滚动后归位 */
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
/* 可选：为移动端优化 */
@media (max-width: 768px) {
.navbar.active {
top: 0;
}
}
⚙️ JavaScript 控制逻辑（含初始化检查）
const navbar = document.getElementById('mainNav');
// 检查并设置初始状态（防止刷新后状态错乱）
function toggleNavbar() {
if (window.scrollY > 0) {
navbar.classList.add('active');
} else {
navbar.classList.remove('active');
}
}
// 绑定滚动监听（节流优化推荐，此处为简洁演示）
window.addEventListener('scroll', toggleNavbar);
// 立即执行一次，确保初始状态正确
toggleNavbar();
? 注意事项与增强建议
- 性能优化：生产环境建议对 scroll 事件添加节流（throttle）处理，避免高频触发影响性能；
- 无障碍支持：为 .navbar 添加 role="navigation" 和 aria-label 提升可访问性；
- 平滑过渡：CSS 中已使用 transition 实现视觉连贯性，可进一步配合 will-change: top 提升渲染性能；
- 移动端适配：注意 position: fixed 在 iOS Safari 中可能触发地址栏缩放行为，建议结合 viewport 设置（如 viewport-fit=cover）及 min-height: 100vh 防止布局抖动。
该方案简洁可靠，兼顾语义化、可维护性与用户体验，是构建专业级滚动导航栏的首选实践。
