Bootstrap 不支持滚动收缩 navbar，需用 JS 监听 scroll 事件（推荐 scrollY > 50 触发），添加 .shrink 类，配合 CSS 缩减 padding、font-size、gap 等，并加 transition 和 requestAnimationFrame 节流以保障流畅体验。
滚动时 navbar 自动变小（高度收缩）
bootstrap 本身不提供「滚动时导航栏自动收缩」的内置行为，必须靠 css + javascript 组合实现。核心思路是：监听 window.onscroll，当页面向下滚动且未在顶部时，给 .navbar 添加一个收缩类（如 .shrink），再用 css 控制其 height、padding、font-size 等属性缩小视觉尺寸。
常见错误是直接改 navbar 的 height 而忽略内边距和子元素缩放，导致文字被裁切或图标错位。正确做法是统一控制：padding 缩减、line-height 调低、.navbar-brand 字体微调、必要时隐藏次要元素（如副标题）。
- 只在移动端或中屏（
max-width: 991px）启用收缩逻辑，桌面端保持原样更合理 - 添加
transition: all 0.2s ease-in-out到.navbar，避免突兀跳变 - 用
document.documentElement.scrollTop || document.body.scrollTop获取滚动位置，兼容性比window.scrollY更稳 - 别在
scroll回调里频繁操作 DOM——加节流（throttle）或用requestAnimationFrame防卡顿
如何判断是否该收缩：用 scrollY 还是 scrollHeight？
应该用 scrollY（即当前滚动距离），而不是 scrollHeight。后者是整个文档高度，和收缩逻辑无关。典型阈值是 scrollY > 50：用户下拉超过 50px 就触发收缩；回到顶部（scrollY === 0）则恢复原始样式。
注意：不要用 offsetTop 或 getBoundingClientRect() 去判断 navbar 位置——它固定在顶部，坐标恒定，无法反映滚动状态。
- 避免写成
if (window.scrollY > 0)——太敏感，轻微滚动就收缩，体验毛刺 - 加防抖：比如
let ticking = false; function updateNavbar() { if (!ticking) { requestAnimationFrame(() => { /* 实际逻辑 */ ticking = false; }); ticking = true; } } - 若用了
position: sticky，确保父容器没有overflow: hidden，否则滚动事件可能不触发
收缩后 logo 和文字挤在一起？检查 padding 和 flex 对齐
Bootstrap 5 的 .navbar 默认用 display: flex，收缩时若只调 padding，容易导致 .navbar-brand 和 .navbar-nav 水平溢出或换行。必须同步调整 flex 子项的 gap、padding 和 min-width。
示例关键 CSS：
.navbar.shrink {
padding: 0.25rem 1rem;
}
.navbar.shrink .navbar-brand {
font-size: 1.1rem;
padding: 0.25rem 0;
}
.navbar.shrink .nav-link {
padding: 0.5rem 0.75rem;
}
.navbar.shrink .navbar-nav {
gap: 0.5rem;
}
- 别用
!important强制覆盖 Bootstrap 的 padding，优先提高选择器特异性（如加.navbar.shrink） - 如果用了
.navbar-expand-lg，收缩时记得在小屏下禁用flex-wrap: wrap，防止菜单折行 - 图标字体（如 Font Awesome）需单独设
font-size，否则会随font-size缩放失真
单页应用（SPA）里滚动收起失效？注意路由切换时机
在 Vue/React 等 SPA 中，页面不刷新，但路由变化后滚动位置可能重置为 0，导致 navbar 恢复“未收缩”状态。这不是 Bootstrap 的问题，而是你监听的 scroll 事件没覆盖到路由跳转后的首次滚动。
解决办法：除了监听 scroll，还要在路由守卫（如 Vue Router 的 afterEach）或 useEffect（React）里手动触发一次 navbar 状态更新。
- Vue 示例：
router.afterEach(() => { updateNavbarState(); }) - React 示例：
useEffect(() => { updateNavbarState(); }, [location.pathname]) - 别在
componentDidMount里只执行一次——它不响应后续路由变化 - 若用了
scrollRestoration: 'manual'，要主动调用window.scrollTo(0, 0)后再更新 navbar
真正难的不是加几行 JS，而是让收缩动画和滚动节奏一致、在各种设备上不闪跳、不遮挡内容，同时不破坏 Bootstrap 的响应式断点逻辑。这些细节没处理好，用户一眼就能感觉到“卡”或“假”。
