Bootstrap 5 导航栏透明化需同时设置 background-color: rgba() 和 background-image: none，否则渐变背景会覆盖；scroll 监听需用 requestAnimationFrame 节流，transition 要写在默认状态且起始值用 rgba(255,255,255,0)；折叠菜单需单独设 rgba 透明背景。
直接改 background-color: rgba() 为什么没效果
因为 Bootstrap 5 的 .navbar 默认带 background-image: linear-gradient(...)，这个渐变图层会盖在你设的 rgba() 上，看起来发灰、不透、颜色不对。光写 background-color 不够，必须显式清掉背景图。
常见错误是只加 !important 却漏了 background-image: none !important，或者用 background: rgba(...) 简写——它会把 background-image 也重置为 none，但可能意外覆盖掉你想要保留的 background-position 或其他值。
- 必须同时设置：
background-color: rgba(255, 255, 255, 0.05) !important+background-image: none !important - 顺手清掉干扰项：
border: none !important、box-shadow: none !important - 文字颜色要单独设，比如
.navbar-light .navbar-brand, .navbar-light .nav-link需配深色文字，否则透明后看不见
window.addEventListener('scroll', ...) 监听滚动的坑
监听 scroll 本身简单，但直接在里面改 class 容易卡顿或触发过频。浏览器每秒可能触发几十次 scroll 事件，不节流的话，样式反复切换会让 transition 失效、动画跳帧。
- 别用
setTimeout节流——延迟会导致滚动停止后才变色，体验滞后 - 推荐用
requestAnimationFrame包一层，确保只在下一帧执行一次判断 - 阈值别设太小：用
window.scrollY > 50，而不是> 0或> 10，避免手指轻滑就触发 - 获取元素别依赖
.navbar：Bootstrap 5 常用.navbar-expand-lg或.navbar-dark，建议用document.querySelector('nav.navbar')更稳
transition: background-color 0.3s 不生效的典型原因
很多人写了 transition 却发现变色是“啪”一下跳过去，不是渐变。根本原因是起始和结束状态的背景值类型不一致，导致浏览器无法插值计算。
- 起始状态不能用
background-color: transparent，必须用rgba(255, 255, 255, 0)——transparent是关键字，rgba()是颜色值，只有同类型才能过渡 - transition 必须写在「默认状态」的 CSS 规则里，不是只写在
.scrolled类中 - 别写
transition: all 0.3s：它会强行过渡所有可动画属性（包括height、opacity），反而拖慢渲染；只列明确要动的：background-color和box-shadow - 如果用了
background-image（哪怕已设为none），某些旧版 Safari 仍可能中断 transition，保险起见加一句will-change: background-color
响应式折叠菜单（.navbar-collapse）的透明穿透问题
桌面端看着透明了，但点开移动端折叠菜单后，弹出层是纯白背景，把整个导航“撑胖”一圈，破坏透明感——这是因为 .navbar-collapse 默认有 background-color: #fff，且它不在 .navbar 的背景层上，而是独立定位的 DOM 节点。
- 必须单独覆盖：
.navbar-collapse { background-color: rgba(255, 255, 255, 0.05) !important } - 如果用了
.navbar-dark主题，记得同步处理.navbar-dark .navbar-collapse，不然折叠层可能黑底白字糊成一片 - 折叠菜单的阴影、边框、内边距都可能泄露“不透明感”，检查
box-shadow、border、padding是否继承了非透明父级样式
最易被忽略的一点：滚动变色逻辑和吸顶（position: sticky）共存时，scrollY 判断要避开 navbar 自身高度。如果 navbar 高 64px，而你在 scrollY > 64 才触发变色，实际用户刚滚过 navbar 就变色，视觉上像“提前反应”。更稳妥的做法是用 getBoundingClientRect().top < 0 判断 navbar 是否已完全离开视口顶部。
