本文介绍一种无需占位符、不破坏文档流、兼容性良好的粘性导航栏实现方案：利用 position: sticky 结合 translate 动画控制显隐，滚动时自动隐藏，上滑或触底时立即显示。
本文介绍一种无需占位符、不破坏文档流、兼容性良好的粘性导航栏实现方案：利用 position: sticky 结合 translate 动画控制显隐，滚动时自动隐藏，上滑或触底时立即显示。
传统 position: fixed 实现粘性导航栏常导致页面内容“上跳”——因为元素脱离文档流后，原本占据的空间消失，后续内容瞬间上移，体验突兀且需额外处理（如插入同高占位元素或动态调整 margin/padding）。而现代更优雅的解法是：保留 position: sticky 的天然流式占位能力，并仅通过 CSS translate 控制视觉显隐。
✅ 核心思路
- 导航栏始终使用 position: sticky; top: 0 —— 它天然保留在文档流中，不会引发布局偏移；
- 隐藏逻辑不依赖 display: none 或 visibility: hidden（会破坏过渡动画），而是用 translateY(-101%) 将其完全移出视口顶部；
- JavaScript 仅负责监听滚动方向与位置，动态切换 .is-hidden 类，交由 CSS 过渡完成平滑动画。
? 关键代码实现
<nav id="navbar">Hello NAVBAR</nav> <main> <p>Hello. Lorem ipsum...</p> <div style="height: 200vh"></div> </main>
#navbar {
position: sticky;
top: 0;
left: 0;
width: 100%;
padding: 2rem;
background: #e74c3c;
transition: translate 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* 更自然的缓动 */
z-index: 1000;
}
#navbar.is-hidden {
translate: 0 -101%; /* 确保完全不可见，避免半截残留 */
}const elNav = document.querySelector("#navbar");
let lastScrollY = window.scrollY;
const toggleNav = () => {
const currentScrollY = window.scrollY;
const isScrollDown = currentScrollY > lastScrollY;
const isScrolledPastNav = currentScrollY > elNav.offsetHeight;
const isAtBottom = currentScrollY + window.innerHeight >= document.documentElement.scrollHeight;
// 触底时强制显示（提升可用性）
if (isAtBottom) {
elNav.classList.remove("is-hidden");
} else {
// 向下滚动且已超出导航高度时隐藏；否则显示
elNav.classList.toggle("is-hidden", isScrollDown && isScrolledPastNav);
}
lastScrollY = currentScrollY;
};
// 初始化 + 监听
toggleNav();
window.addEventListener("scroll", toggleNav, { passive: true });
window.addEventListener("resize", toggleNav);⚠️ 注意事项与优化点
- passive: true 必须启用：避免滚动事件阻塞主线程，提升性能；
- translate 替代 top 动画：translate 触发硬件加速，比 top 更流畅，且不影响布局；
- 触发阈值可灵活调整：例如将 elNav.offsetHeight 改为 elNav.offsetHeight / 2，实现“滚动一小段即隐藏”；
- 无障碍友好：.is-hidden 仅影响视觉呈现，DOM 结构与语义保持完整，屏幕阅读器仍可访问导航；
- 无硬编码高度：无需预设 .navbar-placeholder 高度，适配响应式设计与动态内容。
✅ 总结
相比依赖占位符或 position: absolute/fixed 的旧方案，本方案以更少的代码、更高的可维护性与更优的用户体验，实现了「滚动隐藏、上滑即现、触底必显」的智能导航交互。它充分利用了现代 CSS 的能力，是构建专业级单页应用导航栏的推荐实践。
