滚动时自动隐藏的导航栏

Hide-on-scroll Navbar

初级通用

往下读文章时，顶部导航栏悄悄收起，把整块屏幕让给内容；只要往上滚一下，它就立刻回来，随时能找到菜单和搜索。手机上的新闻、博客 App 几乎都这么做。

你可能会说：「手机上看文章时顶部导航栏太占地方，能不能往下滑的时候藏起来，往上滑再出来？」

效果预览往下读收起，往上滚就回来

正在加载演示…

怎么做3 步做出来

导航栏固定在顶部

导航栏用 position: fixed 或 sticky 放在顶部，并准备一个「隐藏」状态：整条往上移出屏幕。用 transform 移动而不是改 top，动画更顺。

查看代码css

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  transition: transform 0.3s ease;
}
.site-nav.is-hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }
}

判断滚动方向

比较这次和上次的滚动位置：往下滚就隐藏，往上滚就显示。两个细节最重要：一是加一个阈值，滚动距离太小时不处理，否则手指一抖导航栏就闪；二是靠近页面顶部时始终显示。

查看代码js

const nav = document.querySelector('.site-nav');
const THRESHOLD = 8; // 滚动超过 8px 才切换，避免抖动
let lastY = window.scrollY;
let ticking = false;

window.addEventListener('scroll', () => {
  if (ticking) return;
  ticking = true;
  requestAnimationFrame(() => {
    const y = window.scrollY;
    const delta = y - lastY;
    if (Math.abs(delta) >= THRESHOLD) {
      nav.classList.toggle('is-hidden', y > 60 && delta > 0);
      lastY = y;
    }
    ticking = false;
  });
}, { passive: true });

3
键盘聚焦时也要显示
导航栏藏起来时，用键盘 Tab 到导航里的链接，焦点会落在看不见的地方。监听导航栏内的聚焦事件，聚焦时把它拉回来。
查看代码收起代码js
```
nav.addEventListener('focusin', () => {
  nav.classList.remove('is-hidden');
});
```

适合放在哪

适合用

博客、新闻、文档等长文阅读页，尤其是手机上。
电商商品详情页，往下看图文介绍时腾出空间。
社区信息流，往下刷时隐藏顶栏。

不适合用

后台管理页这类频繁使用导航的页面，别自动隐藏；用户会反复找菜单。
导航栏里有「购物车数量」「未读消息」这类需要一直看到的状态时，慎用；或者只隐藏次要部分。
页面很短、几乎不用滚动时，没必要加。

让 AI 帮你做复制给 AI Agent 直接用

请把【网站的顶部导航栏，如：components/Navbar】改成滚动时自动隐藏。先阅读导航栏组件，确认它是 sticky 还是 fixed、页面滚动发生在 window 还是某个容器。要求：往下滚时用 transform: translateY(-100%) 收起，往上滚立刻显示；滚动距离小于约 8px 时不切换，靠近顶部（约 60px 内）始终显示；滚动监听用 passive 并用 requestAnimationFrame 节流；导航栏内有元素获得焦点时显示；移动端打开菜单时不隐藏；开启减少动效时去掉过渡。组件卸载时移除监听。不改无关代码。最后说明怎样在手机上验证不会频繁闪烁。

用到的知识

吸顶顶部导航栏防抖与节流减少动效