最稳方案是用JS直接修改CSS自定义属性--alpha，配合rgba()背景色与transition实现平滑透明度变化，避免opacity导致文字变淡、可访问性下降及渲染卡顿等问题。
直接用 JS 改 CSS 自定义属性（--alpha）最稳，别碰 background 字符串或 opacity 全局透明度——后者会让文字和子元素一起变淡，可读性崩坏。
为什么不能用 opacity 控制导航栏整体透明度
改 opacity 是“把整个导航栏盖层玻璃”，文字、图标、下拉菜单全跟着变淡，尤其在深色背景上极易看不清。用户不是来看半透明模糊界面的。
- 移动端键盘弹出、焦点切换时，
opacity会干扰可访问性（屏幕阅读器可能跳过低透明内容） -
opacity触发图层合成，老安卓 WebView 或 iOS Safari 15.2 以下容易卡顿甚至闪烁 - 无法单独控制背景与文字颜色的响应逻辑（比如背景渐暗时文字反而要变亮）
scroll 事件里只更新 style.setProperty('--alpha', val)
让 CSS 用 var(--alpha) 驱动 background-color: rgba(255,255,255,var(--alpha))，JS 只负责算值、不碰样式字符串。
- 阈值用
navbar.getBoundingClientRect().top ，比window.scrollY > 50更准——避开顶部 banner、加载骨架屏等干扰 - 透明度插值建议用线性映射：
const alpha = Math.min(1, Math.max(0, window.scrollY / 200));（0～200px 滚动区间平滑过渡） - 必须用
requestAnimationFrame节流，否则快速滚动时每帧都触发重绘，iOS 上掉帧明显
CSS 里用 rgba() + transition 组合才真平滑
过渡只写 background-color 和 box-shadow，别加 all——后者会让 z-index、display 等不可动画属性也参与过渡，白费性能。
- 初始状态必须设
background-color: rgba(255,255,255,0)，不是transparent；否则 Safari 对transparent → rgba过渡不渲染 - 如果用了
backdrop-filter: blur(8px)，记得把它也加进transition列表，否则模糊效果突兀出现 - 深色模式下，
@media (prefers-color-scheme: dark)里重设--grad-start和--grad-end，别指望自动反转
Bootstrap 5 下 class 切换要绕开 data-bs-theme 干扰
Bootstrap 5 的 .navbar 可能自带 data-bs-theme="dark" 或内联 style，会覆盖你写的 background-color。硬覆盖不如主动清空。
- JS 初始化时先执行
navbar.removeAttribute('data-bs-theme')，再设style.setProperty - 避免用
navbar.classList.add('scrolled')去切背景类——万一 Bootstrap 内部 JS 又偷偷改了style，你的类会被无视 - 移动端 Safari 对
position: sticky+backdrop-filter+transform组合极敏感，测试时关掉transform: translateZ(0)类
真正难的不是算透明度，是让所有设备上都不闪、不卡、不糊——尤其是 iOS Safari 和 Chrome Android 的渲染差异，得靠 getBoundingClientRect() 定位 + requestAnimationFrame 节流 + rgba() 显式声明三者咬死才压得住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
