必须用 requestanimationframe 节流 + --alpha 自定义属性更新，否则 ios safari 会卡顿、闪屏、地址栏收放时错位；直接改 background-color 字符串触发重排，opacity 降低整体可读性，scrolly 在地址栏变化时突变需防抖。
移动端必须用 requestAnimationFrame 节流 + --alpha 自定义属性更新，否则 iOS Safari 会卡顿、闪屏、地址栏收放时错位。
为什么直接改 background-color 字符串或 opacity 在移动端行不通
改 background-color 字符串（比如拼 "rgba(255,255,255," + alpha + ")"）会强制浏览器重排，iOS WebKit 渲染管线扛不住高频滚动；opacity 则会让文字、图标、下拉菜单全变淡，深色模式下可读性直接归零。更麻烦的是，Safari 地址栏收起/展开时 window.scrollY 会突变 ±80px，没防抖就会触发错误状态。
- 别在
scroll回调里直接设element.style.backgroundColor - 别用
opacity控制整体透明度——它不是“背景渐变”，是“整块糊一层灰” - 不用
getBoundingClientRect().top判定吸顶状态，移动端视口高度动态变化，这个值不稳定
正确做法：只更新 CSS 变量，让样式层自己算
JS 只负责把滚动进度映射成一个 0～1 的归一化值，写进 :root 或导航栏元素的 style.setProperty('--alpha', val)；CSS 用 rgba() + transition 响应。这样浏览器能走合成层优化，不触发布局重排。
- 初始化时必须设
background-color: rgba(255,255,255,0)，不能用transparent——Safari 对transparent → rgba过渡不渲染 - 阈值计算用
Math.min(1, Math.max(0, window.scrollY / 160))（160px 是常见吸顶临界区，比硬写 50 或 100 更适配各种头部 banner 高度） - 节流必须用
requestAnimationFrame，不要用setTimeout或throttle工具函数——后者无法对齐屏幕刷新帧
兼容 iOS Safari 地址栏抖动的关键补丁
地址栏收起时，window.innerHeight 变大，window.scrollY 瞬间跳变，导致导航栏误判“已滚过顶部”。得加两层防护：
- 监听
resize事件，窗口高度变化超过 10px 就重置一次--alpha值 - 滚动中做简单防抖：只在连续两次
scrollY差值 ≥ 5px 时才更新变量，过滤地址栏动画毛刺 - 如果用了
backdrop-filter: blur(6px)，记得把它加进transition属性列表，否则模糊效果会突兀出现
最易被忽略的是：移动端键盘弹出时，scrollY 可能归零或错乱，此时若依赖它驱动变量，导航栏会突然变回透明。真要健壮，得结合 document.scrollingElement.scrollHeight - window.innerHeight 算真实滚动高度，而不是无脑信 scrollY。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
