应使用 css 自定义属性配合 rgba() 和 transition 实现导航栏透明度渐变，避免 opacity 导致文字发虚、掉帧及语义失效，同时需清除 bootstrap 的 data-bs-theme 干扰、精确计算 alpha 值、节流滚动事件并显式声明 transition 属性。
直接用 style.setProperty('--alpha', val) 更新 CSS 自定义属性，配合 rgba() 背景色和 transition 实现平滑渐变，比改 opacity 或拼接 background 字符串更稳、更可访问、更少卡顿。
为什么不能用 opacity 控制导航栏透明度
改 opacity 是把整个导航栏（含文字、图标、下拉菜单）一起“罩玻璃”，深色背景上文字立刻发虚；还会触发图层合成，在 iOS Safari 15.2 以下或老安卓 WebView 中掉帧甚至闪烁；更关键的是，它无法让背景变暗时文字反而变亮——这种语义化响应根本做不到。
JS 里只设变量，不碰 background 字符串
滚动事件中反复拼接 background: rgba(255,255,255,0.3) 会强制重排，iOS 上明显掉帧。正确做法是只更新自定义属性：
- 初始化时给根元素或导航栏设
style.setProperty('--alpha', '0') - 滚动回调里只调
navbar.style.setProperty('--alpha', alpha.toString())，alpha 值用Math.min(1, Math.max(0, window.scrollY / 200))算 - 阈值别硬写
window.scrollY > 50，改用navbar.getBoundingClientRect().top更准，避开顶部 banner 或骨架屏干扰 - 必须套
requestAnimationFrame节流，否则快速滚动时每帧都触发，性能直线下滑
CSS 里 transition 要精写，别偷懒写 all
transition: all 0.3s ease 看似省事，实则危险：它会让 z-index、display 这类不可动画属性也参与过渡，白耗性能。只写真正要动的属性：
transition: background-color 0.3s ease, box-shadow 0.3s ease- 如果用了
backdrop-filter: blur(8px)，记得把它也加进transition列表，否则模糊突兀出现 - 初始背景别写
transparent，改用rgba(255,255,255,0)，否则 Safari 对transparent → rgba()过渡不渲染 - 深色模式下，用
@media (prefers-color-scheme: dark)单独重设--alpha的映射逻辑，别指望自动反转
Bootstrap 5 下 data-bs-theme 会偷偷覆盖你的样式
Bootstrap 5 的 .navbar 可能自带 data-bs-theme="dark" 或内联 style，导致你写的 background-color 被无视。解决办法很直接：
- JS 初始化时先执行
navbar.removeAttribute('data-bs-theme') - 别用
navbar.classList.add('scrolled')切类——Bootstrap 内部 JS 可能随时又把style改回去 - 硬覆盖不如主动清空，把控制权拿回来
最易被忽略的点是初始状态和 Safari 渲染兼容性：rgba(255,255,255,0) 和 backdrop-filter 的 transition 必须显式声明，否则在部分 Safari 版本里压根不生效，用户只会看到“咔”一下变色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
