悬浮导航栏滚动后变色，核心不是靠 position: sticky 实现变色，而是用 window.scrolly 判断滚动位置 + 切换 css 类 + transition 做平滑过渡；sticky 仅负责吸顶布局，不感知滚动距离，也不触发视觉变化，变色必须由 js 控制状态、css 承担样式。
直接说结论：悬浮导航栏滚动后变色，核心不是靠 position: sticky 实现变色，而是用 window.scrollY 判断滚动位置 + 切换 CSS 类 + transition 做平滑过渡。粘性定位只负责“吸顶”，变色逻辑必须由 JS 控制状态、CSS 承担样式。
为什么 sticky 不会触发变色？
position: sticky 是纯布局行为，它不感知滚动距离，也不产生事件。你给导航栏加了 top: 0 和 sticky，它只是“到顶就卡住”，但背景色、文字色这些视觉变化，得你自己告诉浏览器“现在该变了”。
- 常见错误：只写
nav { position: sticky; top: 0; background: rgba(255,255,255,0.9); }—— 这样永远是半透明白底，滚不滚都一样 - 真正起作用的是 JS 读取
window.scrollY，然后加类如nav-scrolled - 别在
scroll回调里直接改style.backgroundColor，会丢掉 CSS transition 动画
怎么用 scrollY + class 切换实现平滑变色？
关键在节流 + 状态分离：JS 只管“有没有滚过阈值”，CSS 负责“滚过之后长什么样”。
- 给
<nav id="main-nav"></nav>初始加 classnav-transparent - 监听
window.addEventListener('scroll', ...)，但用requestAnimationFrame包一层，避免高频触发 - 判断条件用
window.scrollY > 50（而不是document.documentElement.scrollTop，后者在部分 iOS Safari 下不准） - 满足条件时加
nav-scrolled类，不满足时移除 —— 不要 toggle，避免误判 - CSS 里写：
.nav-transparent { background-color: rgba(255, 255, 255, 0); } .nav-scrolled { background-color: rgba(255, 255, 255, 0.95); transition: background-color 0.3s ease; }
悬停（hover）和滚动状态能共存吗？
能，但必须用 CSS 类组合写法，不能靠 JS 同时控制 hover 和 scroll 状态。否则容易冲突或覆盖。
- 不要写
nav:hover { background: #fff; }—— 这会和nav-scrolled的背景色打架 - 正确做法是定义组合类：
.nav-scrolled a:hover { color: #ff6b6b; }和.nav-transparent a:hover { color: #fff; } - 链接文字颜色、下划线、图标缩放等所有悬停效果，都绑定在对应滚动状态的父类下
- 这样既保证滚动态和悬停态正交，又避免 JS 绑定
mouseenter/mouseleave带来性能开销
移动端 fixed 导航栏闪烁/错位怎么办？
iOS Safari 对 position: fixed + 透明背景的渲染不稳定，尤其在快速滚动时。
- 给
加overscroll-behavior-y: contain;，阻止滚动穿透 -
<nav></nav>必须设明确高度（如height: 60px），不能靠内容撑开 - 慎用
backdrop-filter: blur(10px)—— iOS 15+ 才稳定支持，旧版会直接失效或白屏 - 首屏空荡时（比如只有 banner 图），加
box-shadow: 0 1px 3px rgba(0,0,0,0.08)提供视觉锚点，否则用户会以为导航栏没加载
最常被忽略的点：透明导航栏在首屏无内容支撑时，人眼缺乏参照物，根本看不出它存在。哪怕加 0.5px 的 border-bottom 或极淡阴影，都能立刻建立视觉信任。别指望用户凭直觉知道“上面有东西”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
