滚动时改 opacity 会让文字变糊，因其作用于整个元素及子节点，降低可读性并触发图层合成导致卡顿；应改用 background-color 的 alpha 通道或 backdrop-filter: blur() 配合特性检测与自定义属性控制。
滚动时改 opacity 为什么会让文字变糊？
因为 opacity 是作用于整个元素及其所有子节点的——导航栏里文字、图标、下拉箭头全被“盖了层灰玻璃”。尤其在深色背景上，opacity: 0.6 的文字可读性直接崩坏；更糟的是，它会触发图层合成，在 iOS Safari 15.2 以下或老安卓 WebView 中容易卡顿甚至闪烁。
真正要动的不是整体透明度，而是背景本身的透光率。所以别碰 opacity，改 background-color 里的 alpha 通道（比如 rgba(255,255,255,0.3)），或者用 backdrop-filter: blur() 配合自定义属性控制模糊强度。
backdrop-filter: blur() 在移动端到底能不能用？
iOS Safari 15.4+ 才稳定支持 backdrop-filter: blur()，15.3 及更早版本会直接 fallback 成纯色（无模糊、无渐变），且不报错、不提示——你测不出来，用户就看到一块突兀的白板。
如果必须兼容老 iOS：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (backdrop-filter: blur(1px))做特性检测，只在支持环境启用模糊 - fallback 方案别写
transparent，而用rgba(255,255,255,0.01)这类极低 alpha 值，避免 Safari 对transparent → rgba过渡不渲染 - 把
backdrop-filter加进transition列表，否则模糊值跳变会非常生硬
JS 怎么安全地驱动滚动渐变？
核心原则：JS 只算值、不写样式字符串。滚动事件里反复拼接 background: linear-gradient(...), rgba(...) 会导致强制重排，iOS 上掉帧明显。
正确做法是只更新 CSS 自定义属性：
- 在 CSS 里定义：
background: linear-gradient(var(--grad-start), var(--grad-end)), rgba(255,255,255,var(--alpha)); - JS 里只调：
nav.style.setProperty('--alpha', alphaValue); - 用
requestAnimationFrame节流，别在scroll里直接改 - 阈值检测别用
window.scrollY > 50，改用nav.getBoundingClientRect().top，避开顶部 banner 或骨架屏干扰
初始状态必须设 --alpha: 0，而不是 transparent，否则 Safari 过渡不生效。
深色模式下 blur 和渐变怎么同步适配？
@media (prefers-color-scheme: dark) 不会自动反转渐变方向或模糊效果。你得手动重设变量：
- 在深色媒体查询里覆盖
--grad-start和--grad-end，比如从#fff改成#1e1e1e -
--alpha值可能也要调，比如浅色模式下 0→0.9，深色模式下可能更适合 0→0.7，避免背景过亮压住文字 - blur 强度通常不用变，但若搭配半透明白色背景，在深色下 blur 会显得更“脏”，建议同步降一点值（如
blur(4px)→blur(2px)）
最易被忽略的一点：blur 效果依赖背后内容的可见性。如果导航栏下面是一块 background: #000 的空 div，那再强的 blur 也看不出层次——得确保滚动容器里真有内容透上来。
