Bootstrap 5 的 fixed-top 类可实现导航栏吸顶，但需注意 body padding-top 适配、下拉菜单定位、z-index 冲突及滚动状态样式切换等细节问题。
导航栏加 fixed-top 类就能吸顶，但别急着写死
Bootstrap 5 默认支持固定顶部导航栏，核心就是给 <nav> 或 <header> 加上 fixed-top 类。它会触发 position: fixed 并自动设置 top: 0，同时添加 padding-top 到 <body> 防止内容被遮挡。
但实际用时容易忽略两点：一是页面顶部留白是否合理，二是滚动后内容是否真的没被盖住。
-
fixed-top会让导航栏脱离文档流，下方内容会“上移”，所以 Bootstrap 自动给<body>加了padding-top（值等于导航栏高度），这个值在响应式下会变化，不是固定像素 - 如果你自定义了导航栏高度（比如加了更大的
padding或font-size），<body>的默认 padding 就不够了，得手动覆盖body { padding-top: Xpx; } - 如果页面开头有
margin-top: -20px这类负边距，或用了position: relative的 wrapper，可能让首屏内容仍被遮挡，得检查 computed styles
移动端下拉菜单展开后，固定导航栏会挡住下拉项
这是最常踩的坑：在小屏幕点开 navbar-toggler，下拉菜单弹出来，结果被 fixed-top 导航栏裁掉一半——因为下拉菜单默认用 position: absolute，而父容器没设 position: relative，导致定位参考的是 viewport，又被 fixed 元素压在下面。
- 确保下拉菜单的直接父元素（通常是
<div class="navbar-collapse">）有position: relative，Bootstrap 5 默认没加，得自己补 - 更稳妥的做法是给下拉菜单加
data-bs-popper="none"（禁用 Popper），然后用top: 100%+position: absolute手动控制位置 - 如果用了自定义下拉动画（比如 fade），注意
z-index：导航栏默认z-index: 1030，下拉菜单至少要设z-index: 1031
滚动时想让导航栏从透明变实色，CSS 要配合 JS 监听
Bootstrap 本身不提供滚动态样式切换，得自己加逻辑。关键不是“怎么改背景”，而是“什么时候改”——不能只靠 scroll 事件，性能差还容易卡顿。
- 用
IntersectionObserver监听页面顶部区域是否离开视口，比监听scroll更轻量，兼容性也够（Chrome 51+/Firefox 55+） - 不要直接操作
style.backgroundColor，优先用 class 切换，比如navbar-scrolled，再在 CSS 里写.navbar-scrolled { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); } - 如果导航栏里有 logo 图片，滚动后变实色时记得同步调整 logo 的
filter: brightness()或换深色版本，否则在白底上可能看不清
和第三方库（如 Swiper、Tippy.js）一起用时，z-index 冲突很常见
只要导航栏是 fixed-top，它的 z-index: 1030 就成了事实标准。但 Swiper 的分页器、Tippy 的 tooltip 默认 z-index 往往只有 1000 左右，一滚动就钻到导航栏底下。
- 查目标组件的文档，找
zIndex或popperOptions配置项，显式设为1031以上 - Swiper 5+ 可以在初始化时传
{ zIndex: 1031 }；Tippy 用zIndex: 1031或通过popperOptions.modifiers调整 - 避免全局覆盖
* { z-index: ... }，容易引发连锁问题；宁可针对具体选择器加!important，比如.tippy-box { z-index: 1031 !important; }
固定导航栏看着简单，真正上线前得在真机上滑几次，重点看下拉菜单是否完整、滚动态过渡是否顺滑、第三方浮层有没有被吃掉——这些地方一出问题，用户第一反应不是“网站卡”，而是“这网站做得很糙”。
