应使用 background-color 的 rgba() 动态控制 alpha 通道实现导航栏透明渐变，配合 requestAnimationFrame 节流滚动监听；禁用 opacity 防文字发虚、卡顿与闪屏，并添加视觉锚点、固定高度及 overscroll-behavior-y 等细节保障跨端稳定。
导航栏要实现「初始透明 → 滚动渐变 → 完全不透明」，关键不是调 opacity，而是用 background-color 的 rgba() 值动态控制 alpha 通道，并配合节流滚动监听 —— 否则文字发虚、滚动卡顿、iOS 上闪屏全是必然结果。
别碰 opacity：它会让文字和图标一起变糊
给 直接设 opacity: 0.5 是最常见翻车点。这会把里面所有子元素（a、svg、下拉菜单）全部降权渲染，导致点击反馈弱、文字对比度崩坏、高亮状态失效。
- 正确做法：只改
background-color: rgba(255, 255, 255, 0.0)→rgba(255, 255, 255, 0.95)，alpha 从 0 线性递增 -
rgba()第四个参数支持小数（如0.23），别写整数0或1就完事，得留出过渡空间 - 十六进制色如
#fff不能直接加透明度，必须转成rgb()或用hsla()
requestAnimationFrame 节流比 window.onscroll 直接改样式稳得多
在 scroll 回调里直接读 window.scrollY 再写 style.background，会触发强制同步布局（forced reflow），尤其在低端安卓机上一卡一卡的。
- 用
requestAnimationFrame包一层，确保样式更新合并在下一帧，不打断滚动流 - 只在帧内读一次
scrollY，算出 alpha 值后批量更新类名，而不是反复操作内联样式 - 避免在滚动回调里调
getBoundingClientRect()、offsetHeight这类会触发布局计算的 API
移动端 fixed 导航栏透明时必须加视觉锚点
iOS Safari 下，position: fixed + rgba(..., 0) 的导航栏在首屏纯图或轮播页里容易“消失”，用户会以为页面没加载完。
- 哪怕 alpha=0，也加一条极细的
border-bottom: 1px solid rgba(0,0,0,0.05)或box-shadow: 0 1px 2px rgba(0,0,0,0.06) - 给
加overscroll-behavior-y: contain，防滚动穿透导致导航栏错位 - 确保
有明确高度（如height: 60px），别依赖内容撑开，否则 iOS 渲染不稳定
真正难的不是算出 alpha 值，而是让透明变化在各种设备上都“不抢戏”——太慢像卡住，太快像闪烁，完全透明又让人找不到入口。这些细节没压到像素级，效果就只是“看起来有点意思”，不是“用起来刚刚好”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
