必须用JavaScript判断滚动方向并控制显隐，因fixed-top/sticky-top不感知方向；可靠方法是记录lastScrollY与currentScrollY差值：差值>0为向下滚动，<0为向上滚动，并设阈值（如80）和初始值防iOS负值；隐藏用transform: translateY(-100%)配合transition，禁用display:none以免破坏折叠状态；需节流、补touch事件、处理锚点跳转偏移。
必须用 JavaScript 监听滚动方向并手动控制显隐，Bootstrap 自带的 fixed-top 或 sticky-top 类完全不感知方向，加了就一直固定或吸附，无法实现“向下滚隐藏、向上滚出现”。
怎么判断是向上还是向下滚动
只看 window.scrollY > 0 会误触发——用户轻微下拉就隐藏，体验极差。真正可靠的是记录上一次位置，做差值判断：
- 用
lastScrollY存上一次window.scrollY值，首次设为0 - 当前
currentScrollY - lastScrollY > 0→ 向下滚动 - 当前
currentScrollY - lastScrollY → 向上滚动 - 加阈值（如
window.scrollY > 80）避开首屏 banner，防止误判 - iOS bounce 可能让
window.scrollY为负，首次判断前先取Math.max(0, window.scrollY)
隐藏和显示该用什么 CSS 方式
别用 display: none 或 visibility: hidden ——前者会中断 .navbar-collapse 的展开状态，后者仍占布局空间且遮挡下方内容。推荐用 transform：
- 给
<nav class="navbar">加固定高度，比如style="height: 56px;"，否则translateY动画失效 - CSS 定义：
.navbar.hidden { transform: translateY(-100%); } - JS 中只切换
.hidden类，不碰style.display - 务必配
transition: transform 0.3s ease-in-out，太短难察觉，太长拖慢反馈 - 若 navbar 高度不固定，改用
transform: translateY(calc(-1 * var(--navbar-height)))，并在 HTML 上设style="--navbar-height: 56px;"
移动端 touch 滚动事件怎么补全
iOS Safari 和部分安卓 WebView 在 touch 滚动过程中不持续触发 scroll 事件，导致 navbar 状态卡住不动。必须补充监听：
- 在
touchstart时记录lastScrollY = window.scrollY - 在
touchend后立刻执行一次方向判断（因为 scrollY 此时才真正更新） - 禁用
body { overscroll-behavior: contain }，它会阻断事件冒泡 - 统一用
window.scrollY，别用document.scrollingElement.scrollTop—— 后者在某些 Android WebView 下返回undefined - 锚点跳转（如点击
#section2）会高频触发 scroll，建议加setTimeout(() => { /* 重置状态 */ }, 100)避免类反复切换
最常被忽略的是：navbar 高度参与页面 offset 计算，隐藏后锚点定位会偏移；还有就是没节流，scroll 事件每像素都触发，低端安卓机直接卡顿甚至 DOM 错乱。
