如何实现平滑隐藏/显示的粘性导航栏（Sticky Navbar）-js教程-PHP中文网

本文介绍一种无需占位符、不破坏文档流、兼容性良好的粘性导航栏实现方案：利用 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 class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/ai/2976" title="Meigen AI"><img
														src="https://img.php.cn/upload/ai_manual/001/246/273/6a2144c4731b6364.png" alt="Meigen AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/ai/2976" title="Meigen AI" class="overflowclass">Meigen AI</a>
													<p class="overflowclass">一款AI图像与设计工具，主要用于AI 图片提示词资源库，收录大量可直接使用的视觉模板，整理 X 上最新火爆的 prompt，适用于生成产品图、品牌视觉及社交媒体配图，适合需要提升相关任务效率的用户。</p>
												</div>
												<a rel="nofollow" href="/ai/2976" title="Meigen AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  <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);