滚动时导航栏自动隐藏/显示需用JavaScript监听scroll事件，通过比较当前与上一次scrollY判断方向，结合阈值（如50px）控制hidden类增删，并用transform实现平滑过渡，同时注意fixed-top布局影响及性能优化。
滚动时导航栏自动隐藏/显示的实现原理
Bootstrap 本身不提供滚动自动隐藏导航栏的功能，必须配合 JavaScript 监听 window.scrollY 或 scroll 事件手动控制 DOM 状态。核心逻辑是：当用户向下滚动超过阈值（如 50px），给 <nav> 添加一个类（如 hidden）触发 CSS 过渡；向上滚动且速度较慢或停顿时再移除该类。
用 getBoundingClientRect() 判断滚动方向更可靠
仅靠 scrollY 增减无法区分“快速下滑”和“缓慢回滚”，容易误触发。推荐用上一次滚动位置与当前 scrollY 比较，并结合时间戳防抖。但更稳妥的做法是监听 scroll 事件，缓存前一次 scrollY，再计算差值符号：
let lastScrollY = 0;
window.addEventListener('scroll', () => {
const currentScrollY = window.scrollY;
const isScrollingDown = currentScrollY > lastScrollY;
const isScrollingUp = currentScrollY < lastScrollY;
if (isScrollingDown && currentScrollY > 50) {
document.querySelector('nav').classList.add('hidden');
} else if (isScrollingUp) {
document.querySelector('nav').classList.remove('hidden');
}
lastScrollY = currentScrollY;
});
-
hidden类需提前在 CSS 中定义，例如transform: translateY(-100%)+transition: transform 0.3s ease-out - 务必加
currentScrollY > 50条件，避免页面刚加载就隐藏 - 不要用
setTimeout节流，会延迟响应；用requestAnimationFrame更平滑（但简单项目可先省略）
Bootstrap 5 的 navbar 需注意 fixed-top 的定位影响
如果导航栏用了 fixed-top，它的 position: fixed 会让 transform 动画生效但可能遮挡内容顶部。此时要确保 body 有足够 padding-top 补偿导航栏高度，否则隐藏后内容会上跳。
- 检查
nav元素是否被sticky-top或fixed-top干扰 ——fixed-top优先级更高，transform仍有效 - 若用
sticky-top，隐藏时需额外设置top: -100%防止占位，因为sticky元素脱离文档流后仍保留原始空间 - 移动端 Safari 对
transform+fixed组合有渲染 bug，可改用visibility: hidden+opacity: 0作为降级方案
如何避免快速滚动时的闪烁或卡顿
主要瓶颈在反复读取 scrollY 和操作 classList。现代浏览器虽优化了，但在低端安卓机或长页面仍可能掉帧。关键点是减少重排重绘：
- 把
document.querySelector('nav')提到事件外缓存，避免每次查找 DOM - 不要在 scroll 回调里调用
getBoundingClientRect()或任何布局读取 API - 动画属性只用
transform和opacity，它们不触发重排 - 如果页面有大量监听器，考虑用
passive: true选项注册 scroll 事件（但 classList 操作意味着不能完全 passive）
真正难处理的是滚动惯性结束后的“悬停判定”——用户松手后滚动还会继续，此时需等 scroll 事件真正停止，而不是一动就切状态。这个细节多数教程会忽略，但实际体验中非常关键。
