Navbar 滚动隐藏需手动 JS 控制：监听 scroll/touch 事件并节流，用 window.scrollY 差值判断方向，配合 transform 动画与 fixed 定位，避免 sticky 冲突及移动端兼容问题。
滚动时 Navbar 突然消失，根本没触发隐藏逻辑
bootstrap 默认的 navbar 不带滚动隐藏行为，所谓“滚动隐藏”必须手动加 js 控制显隐，不是开个 class 就能生效。常见错误是只写了 css（比如加 .navbar-hidden）但没监听 scroll 事件，或者监听了却没做节流，导致频繁重绘卡顿甚至 dom 错乱。
实操建议：
- 用
window.addEventListener('scroll', handler)监听，别用 jQuery 的$(window).scroll()（除非项目强依赖 jQuery） - 务必加节流：用
setTimeout或requestAnimationFrame包一层，避免每像素滚动都执行判断 - 判断依据推荐用
window.scrollY和上一次记录的lastScrollY做差值，而不是单纯看是否 > 0 —— 否则下拉一点就隐藏，体验极差 - 隐藏时用
classList.add('d-none')，显示时用classList.remove('d-none')，别直接操作style.display，否则和 Bootstrap 响应式类冲突
隐藏/显示切换生硬，没有过渡动画
纯 display: none 切换会导致 Navbar 瞬间消失，用户感知突兀。Bootstrap 5+ 自带 fade 和 slide 类，但默认不适用于 navbar 的滚动控制场景，需配合自定义 CSS。
实操建议：
- 给
<nav class="navbar"></nav>加固定高度（如style="height: 56px;"），否则transform: translateY()动画会因高度塌陷失效 - 用
transform: translateY(-100%)隐藏，transform: translateY(0)显示，配合transition: transform 0.3s ease-in-out - 避免用
opacity单独控制，因为透明后仍占布局空间，可能遮挡下方内容 - 在隐藏状态下保留
pointer-events: none，防止滚动中误触残留交互区域
移动端触摸滚动失效或判定异常
iOS Safari 和部分安卓 WebView 中，scroll 事件在 touch 滚动期间不持续触发（尤其启用了 overflow: hidden 或 -webkit-overflow-scrolling: touch 的容器），导致 Navbar 状态不同步。
实操建议：
- 监听
touchstart和touchend补充判断：touchstart 时记录初始scrollY，touchend 后比对位移方向 - 禁用
body { overscroll-behavior: contain }（如果用了），它会抑制滚动事件冒泡 - 不要依赖
document.scrollingElement.scrollTop，统一用window.scrollY，兼容性更稳 - 在 iOS 上测试时关闭“页面回弹”（即禁用
bounce），否则scrollY可能为负值，干扰方向判断
Navbar 固定定位（position: sticky）与滚动隐藏冲突
当 navbar 使用 position: sticky（Bootstrap 5 默认 navbar-brand 区域常这么设），其粘性行为和 JS 控制的 transform 动画会打架：sticky 元素的 transform 不会触发重排，导致动画卡住或失效。
实操建议：
- 放弃
position: sticky，改用position: fixed+ 手动计算 top 值（如top: env(safe-area-inset-top)适配刘海屏） - 若必须用 sticky，请把隐藏逻辑移到父容器（如
<header></header>），让 navbar 本身不参与 transform，只控制父容器的位移 - 检查是否有
will-change: transform写在 navbar 上——这会强制 GPU 加速，但在某些 Android 机型上反而导致渲染错位 - 在
resize事件里重置状态变量（如lastScrollY = window.scrollY），否则窗口缩放后方向判断可能翻车
