固定顶栏需加fixed-top类且body预留顶部空间；ios safari需加backface-visibility和transform缓解抖动；scrollspy或平滑滚动时须设置offset；z-index需统一提升至1050以上防覆盖。
固定顶栏必须加 fixed-top 类，且 body 需要预留顶部空间
Bootstrap 的 navbar 默认是静态流式布局，不加任何类不会吸顶。只加 fixed-top 还不够——页面内容会从顶部被遮盖，因为 fixed 脱离文档流，body 原本的首屏内容直接顶到视口最上方。
实操建议：
- 给
<nav></nav>加class="navbar fixed-top"（注意不是sticky-top） - 在
上加内边距：Bootstrap 5 推荐用pt-5（约 3rem），或手动写style="padding-top: 4rem;" - 如果用了自定义高度的 navbar，padding 值必须 ≥ navbar 实际高度（含 border/padding）
- 避免同时加
sticky-top和fixed-top，后者优先级高但行为不同，混用会导致定位异常
fixed-top 在移动端可能触发 Safari 滚动卡顿
iOS Safari 对 position: fixed 的渲染有历史问题，尤其配合快速滚动或输入框聚焦时，顶栏可能跳动、闪烁甚至消失。这不是 Bootstrap bug，而是 WebKit 的限制。
实操建议：
- 给
<nav></nav>显式加style="backface-visibility: hidden; transform: translateZ(0);"，缓解重绘抖动 - 避免在
fixed-top内部放position: absolute子元素，容易触发层叠上下文错乱 - 测试时务必真机连 Safari 开发者工具调试，模拟器无法复现部分滚动行为
- 若业务允许，可降级为
sticky-top（仅在滚动时吸附），兼容性更好但非始终固定
与 ScrollSpy 或平滑锚点滚动冲突时，需手动调整 offset
当页面启用 scrollspy 或使用 href="#section" + scroll-behavior: smooth 时，点击导航跳转目标区域会被 fixed-top 遮住顶部 —— 因为滚动计算没把顶栏高度算进去。
实操建议：
- Bootstrap 5 的
scrollSpy支持offset选项：data-bs-offset="56"（对应 navbar 高度） - 纯 CSS 平滑滚动需 JS 补偿：
scrollIntoView({ block: 'start', behavior: 'smooth', top: -56 }) - 不要依赖
getBoundingClientRect().top直接滚动，它返回的是相对视口值，fixed 元素下会出错 - 若用第三方锚点库（如
anchor-js），查其文档是否支持全局 offset 配置
自定义 navbar 高度后，fixed-top 的 z-index 可能不够用
默认 fixed-top 的 z-index 是 1030，看起来够高，但一旦你用 !important 给弹窗、下拉菜单或第三方组件设了更高 z-index（比如 9999），顶栏就会被盖住。
实操建议：
- 检查所有可能覆盖 navbar 的组件（
dropdown-menu,modal,tooltip），它们的 z-index 是否 > 1030 - 统一提升 navbar 层级：
.navbar.fixed-top { z-index: 1050; }（别硬写 9999） - 避免在
fixed-top内部用position: relative+z-index做局部层级控制，容易和外部冲突 - 用浏览器开发者工具的“Layers”面板确认真实渲染层级，别只看 CSS 声明
固定顶栏看着简单，真正上线前最容易翻车的是三件事：移动端 Safari 的 fixed 渲染异常、锚点跳转时顶部被截断、以及 z-index 被其他库悄悄覆盖。每项都得单独验证，不能只靠预览效果判断。
