直接加 fixed-top 或 sticky-top 无法实现向上滚动隐藏，因二者不感知滚动方向；需用 JavaScript 通过 window.scrollY 差值判断方向，配合 transform 切换 hidden 类并加 transition 动画，同时处理 touch 事件、锚点跳转等边界情况。
为什么直接加 fixed-top 或 sticky-top 不行
这两个类都只控制定位方式，不感知滚动方向。fixed-top 一加载就固定在顶部，sticky-top 是进入视口即吸附，两者都不会“等你往上滚才出现”或“往下滚就收走”。要实现「向上滚动时隐藏」，必须用 JavaScript 判断方向并动态操作 DOM。
window.scrollY 差值判断滚动方向的实操要点
仅靠 window.scrollY > 0 会误判：轻微下拉就触发隐藏，体验极差。真正可靠的方式是记录上一次的 scrollY，和当前值做差：
- 差值 currentScrollY ）
- 差值 > 0 → 向下滚动
- 首次滚动时设初始值为
0，避免 NaN 或负值干扰（尤其 iOS bounce 回弹会使scrollY为负） - 建议加阈值（如
scrollY > 80），避开首屏 banner 或轮播图区域，防止误触
隐藏时用 transform 而不是 display: none
display: none 会中断 Bootstrap 的折叠状态同步——比如用户刚点开汉堡菜单，navbar 突然消失，再滑回来时菜单仍处于展开态但不可见。正确做法是：
- 给
.navbar根元素加fixed-top（确保已脱离文档流） - 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;"
移动端触摸滚动事件容易失效
iOS Safari 和部分安卓 WebView 在 touch 滚动期间不持续触发 scroll 事件，导致 navbar 状态卡住。必须补充监听：
- 在
touchstart时记录lastScrollY = window.scrollY - 在
touchend后立即执行一次方向判断（因为 touch 滚动结束时才真正更新scrollY） - 禁用
body { overscroll-behavior: contain }，它会阻断事件冒泡 - 统一用
window.scrollY，别用document.scrollingElement.scrollTop—— 后者在某些 Android WebView 下返回undefined
最常被忽略的是锚点跳转后的状态错乱：点击 #section2 时浏览器强制滚动，scroll 事件高频触发，.hidden 类反复切换。解决方案是加一个 setTimeout 延迟重置状态，或在 hashchange 事件中主动恢复显示。
