关键在于用JavaScript监听滚动事件并动态增删.bg-white等背景类，而非依赖Bootstrap自带类；需配合transition、合理阈值及requestAnimationFrame节流以确保平滑变色。
导航栏初始透明但滚动后变色的 CSS 类切换逻辑
关键不是靠 bootstrap 自带类直接实现，而是监听滚动事件 + 动态增删 .bg-white 或 .bg-dark 这类背景类。bootstrap 的 .navbar 默认是透明的（无背景），一旦加了 .bg-* 类就立刻有底色——所以“透明→有色”本质是控制这些背景类的有无。
常见错误是直接写 .navbar { background: transparent; } 然后指望它自动变色，结果滚动时背景没变化，因为 CSS 静态规则无法响应滚动位置。
- 必须用 JavaScript 检测
window.scrollY是否超过阈值（比如 10px） - 在
scroll事件里对.navbar元素调用classList.toggle('bg-white', window.scrollY > 10) - 记得给
.navbar加transition: background-color 0.3s，否则变色会突兀 - 如果用了
.fixed-top，注意滚动监听依然有效；但若用.sticky-top，在某些旧版 Safari 上可能触发不及时
为什么不能只靠 Bootstrap 的 .navbar-light 或 .navbar-dark
.navbar-light 和 .navbar-dark 只控制文字/图标颜色，不控制背景——它们默认仍依赖父容器或自身 background-color。如果你没显式加 .bg-* 类，它们渲染出来就是透明的，滚动也不会自动上色。
典型误操作：以为加了 .navbar-light .bg-transparent 就能“智能变色”，其实这只是锁死了透明状态，后续 JS 切换类时会被 .bg-transparent 的高优先级覆盖。
-
.bg-transparent的 CSS 优先级高于多数动态添加的.bg-white，导致切换失败 - 正确做法是初始不设任何
.bg-*类，让 JS 完全控制 -
.navbar-light仅需保留，用于确保滚动后文字在浅色背景上可读（比如配.bg-white）
滚动阈值设多少才自然？别用固定像素值
硬写 window.scrollY > 50 很容易在不同设备上表现割裂：手机小屏下用户刚滑一指头就变色，桌面端又可能要滚半屏才触发。更稳妥的是按导航栏自身高度判断。
错误示范：if (scrollY > 60) {...} —— 假设你改了 .navbar 的 padding 或字体大小，这个阈值就失效。
- 用
document.querySelector('.navbar').offsetHeight获取实时高度 - 阈值设为
offsetHeight * 0.8或直接> 0（即只要滚动就变色，适合首屏无大图的页面） - 如果导航栏含下拉菜单或搜索框，
offsetHeight会包含展开状态的高度，建议在折叠态下取值
移动端 Safari 滚动卡顿与节流陷阱
直接在 scroll 事件里调用 classList.toggle 在 iOS Safari 上可能掉帧，尤其搭配 position: sticky 时。这不是 Bootstrap 的锅，是浏览器对频繁 DOM 操作的限制。
现象：滚动时导航栏闪烁、变色延迟半秒、甚至完全不响应。
- 必须加节流：用
requestAnimationFrame包一层，而不是setTimeout或 Lodash 的throttle - 示例结构：
let ticking = false;<br>function updateNavbar() {<br> if (!ticking) {<br> requestAnimationFrame(() => {<br> navbar.classList.toggle('bg-white', window.scrollY > threshold);<br> ticking = false;<br> });<br> ticking = true;<br> }<br>} - 避免在
scroll里重复查 DOM（如每次重取offsetHeight），提前提取并缓存
滚动变色的核心其实是「何时切类」和「怎么切稳」，不是样式堆砌。最容易被忽略的是移动端节流方式和 .bg-transparent 的干扰——这两个点卡住，其他都白搭。
