fixed-top需手动调整body padding-top以匹配实际navbar高度，下拉菜单需设.navbar-collapse为relative或禁用Popper，滚动变色宜用IntersectionObserver而非scroll事件，sticky兼容性差于fixed。
fixed-top 类能直接用，但 body 的 padding-top 不一定够
Bootstrap 5 的 fixed-top 类确实能让导航栏吸顶，它背后是 position: fixed; top: 0，同时自动给 加 padding-top 防止内容被遮挡。但这个 padding 值是根据默认 navbar 高度（约 56px）算的，一旦你改了字体、内边距、行高或加了 logo 图片，实际高度就变了。
常见错误现象：首屏内容顶部被截掉一截，或者出现明显空白；检查 computed styles 会发现 body.padding-top 小于 navbar 实际高度。
- 用
getComputedStyle(document.querySelector('.navbar')).height在控制台查真实高度 - 手动覆盖
body { padding-top: 64px !important; }（按实测值调整） - 如果用了
navbar-expand-xx响应式类，在小屏下 navbar 高度可能突变，得用媒体查询重设 padding
移动端下拉菜单被 fixed 导航栏裁切，根源在定位上下文丢失
点开 .navbar-toggler 后，.dropdown-menu 只显示上半部分甚至完全不可见——这不是 z-index 问题，而是它默认以 viewport 为定位参考，而 fixed-top 导航栏盖在了上面。
根本原因是 .navbar-collapse 这个父容器没设 position: relative，导致子级 position: absolute 的下拉菜单“找不到爹”，飘到了错误位置。
- 给
.navbar-collapse显式加style="position: relative;"或自定义 class 如navbar-collapse-relative并配 CSS - 更可控的做法：加
data-bs-popper="none"禁用 Popper 定位，再用.dropdown-menu { top: 100%; position: absolute; }手动锚定 - 务必检查
z-index：navbar 默认z-index: 1030，下拉菜单至少设z-index: 1031
滚动时切换背景色，别用 scroll 事件硬监听
想让导航栏滚过首屏后从透明变白底？直接写 window.addEventListener('scroll', ...) 会导致频繁重排重绘，尤其在低端安卓机上卡顿明显。
IntersectionObserver 是更轻量、更现代的解法，它不依赖滚动帧率，只在元素进出视口时触发回调。
- 监听一个占位
<div id="navbar-anchor"></div>（放在导航栏正下方），当它离开顶部视口时，加scrolledclass - 用
document.querySelector('.navbar').classList.toggle('scrolled', entry.isIntersecting === false) - CSS 里只写
.navbar.scrolled { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); }，避免 JS 操作 style - 如果 navbar 里有浅色 logo，记得同步加
.navbar.scrolled .navbar-brand img { filter: brightness(0.8); }
fixed 和 sticky 的选择：iOS 兼容性与语义差异
虽然 position: sticky 更语义化、不脱离文档流、无需手动调 body padding，但 Bootstrap 官方没采用它，原因很实在：
一是 iOS Safari 对 sticky 在某些嵌套场景（比如 flex 容器内）支持不稳定，容易抖动或失效；二是 fixed 行为确定，所有浏览器表现一致，适合框架兜底。
-
fixed缺点：必须处理bodypadding、下拉菜单定位、滚动监听性能；优点：兼容性好，逻辑直白 -
sticky优点：原生支持滚动临界点，不用 JS；缺点：Android 4.x / iOS 12- 存在 bug，且无法和transform共存 - 如果你项目明确不支持 iOS 12 以下，可尝试
.navbar { position: -webkit-sticky; position: sticky; top: 0; }，但仍要测试下拉菜单
滚动吸顶看着简单，真正上线时最容易翻车的不是定位本身，而是那些“本该刚好对齐”的地方——比如自定义高度后漏掉的那几像素 padding，或是小屏下突然多出的 8px 下拉偏移。这些细节不会报错，但用户一眼就能感觉到“不对劲”。
