应通过检查 fixed-top 类是否存在来判断导航栏是否固定，而非依赖 scrollTop 阈值或 getBoundingClientRect；切换背景时须成对操作 navbar-dark 与 bg-black 类，并同步处理折叠菜单和下拉菜单的背景色。
直接用 document.documentElement.scrollTop > 100 判断滚动距离再切背景色，大概率会出错——导航栏高度变化、响应式折叠、sticky fallback 都会让这个“100”失效。
别硬写 scrollTop 阈值，改用 fixed-top 类是否存在来判断
Bootstrap 在导航栏固定时会自动添加 fixed-top 类（或你自定义的固定类，如 navbar-sticky），这才是真实、可靠的固定状态信号。
- 监听
scroll事件，每次检查document.querySelector('.navbar').classList.contains('fixed-top') - 不要依赖
getBoundingClientRect().top或offsetTop，移动端视口缩放、字体渲染差异会导致计算偏移 - 如果用了
position: sticky而非fixed，则改用getComputedStyle(navbar).position === 'sticky'判断 - 避免在 scroll 里反复调用
getComputedStyle，先缓存navbar元素引用
切换背景时必须成对操作 class，不能只改 bg-*
加了 bg-black 但文字发灰、图标消失，是因为 navbar-dark 没同步加，或者 navbar-light 残留干扰。
- 固定后要同时加：
navbar-dark bg-black（深色文字 + 黑背景） - 恢复时要同时移除：
navbar-dark bg-black，并确保回退到navbar-light bg-white或其它浅色组合 - 别混用
data-bs-theme="dark"—— 它是全局主题机制，和单个 navbar 的 class 切换冲突 -
.navbar-toggler-icon在黑底上默认是浅灰 SVG，需额外设filter: brightness(10)或重置background-image
移动端折叠菜单弹出后背景仍是白底？得单独控制 .navbar-collapse
--bs-navbar-bg 只影响导航栏本体，折叠区域（.navbar-collapse）默认透明，子元素如 .navbar-nav 或 .dropdown-menu 才真正显色。
- 固定变黑后，加这条 CSS 确保折叠菜单也黑：
.navbar.fixed-top .navbar-collapse.show { background-color: #000; } - 如果用了下拉菜单（
dropdown），还得覆盖--bs-navbar-dropdown-bg变量 - 检查实际渲染节点：右键 → “检查”，确认
.navbar-collapse.show是否有背景色，而不是只看.navbar - Vue/React 动态 class 绑定时，避免
class="navbar" :class="{ 'bg-black': isFixed }"这种写法漏掉navbar-dark
最常被忽略的是：黑色背景 ≠ 文字自动可读。哪怕加了 navbar-dark，若没配对 bg-black，它只会把文字变浅，背景还是 Bootstrap 默认的浅灰；而加了 bg-black 却没加 navbar-dark，文字就直接糊成一片。两者必须同时存在，且仅作用于当前 navbar 实例。
