移动端导航栏应使用 position: sticky 而非 fixed，因其不脱离文档流、滚动吸顶更稳定；需确保父容器无 overflow: hidden 或 transform，且显式设置 top；滚动变色应通过 css 变量更新并配合 requestanimationframe 防抖、重置与帧对齐。
移动端必须用 position: sticky，别硬套 fixed
在 iOS 和 Android Chrome 中，fixed 定位的导航栏会频繁触发重绘，键盘弹出、地址栏收放时容易错位或消失；而 position: sticky 天然保留在文档流中，不脱离布局上下文，滚动吸顶更稳定。但要注意：父容器不能有 overflow: hidden 或 transform，否则 sticky 失效；top 必须显式设置（如 top: 0），且不能为 auto。
滚动变色不能靠拼接 rgba() 字符串
直接写 element.style.backgroundColor = 'rgba(255,255,255,' + alpha + ')' 会强制触发 layout（重排），iOS Safari 渲染管线扛不住高频 scroll。正确做法是只更新 CSS 变量：
- HTML 中给导航栏加
data-scroll-target属性便于 JS 绑定 - CSS 定义：
.navbar { background-color: rgba(255,255,255,var(--alpha, 0)); transition: background-color 0.2s ease; } - JS 里只调用
document.documentElement.style.setProperty('--alpha', alpha)，让样式层自己算
scrollY 在地址栏收放时突变，必须防抖 + 重置
iOS Safari 地址栏展开/收起瞬间，window.scrollY 可能跳变 ±80px，导致导航栏误判状态。不能依赖原始值直接计算 alpha：
- 滚动中做差值防抖：仅当
Math.abs(currentY - lastY) >= 5才更新变量 - 监听
resize：若window.innerHeight变化 >10px，立即重置--alpha为 0 - 初始化时用
document.scrollingElement.scrollHeight - window.innerHeight算真实可滚动高度，避免键盘弹出后scrollY归零导致透明态错误恢复
transition 和 backdrop-filter 要一起写进 transition 列表
如果用了毛玻璃效果（如 backdrop-filter: blur(6px)），但没把它加入 transition，模糊会突兀闪入，破坏渐变感。CSS 必须写成：
transition: background-color 0.25s ease, backdrop-filter 0.25s ease;
另外，初始背景不能设 transparent —— Safari 对 transparent → rgba() 的过渡不渲染，得用 rgba(255,255,255,0) 起手。
最易被忽略的是：所有滚动逻辑都得跑在 requestAnimationFrame 里，不是节流，是帧对齐；用 setTimeout 或 Lodash throttle 都会掉帧，iOS 上卡顿肉眼可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
