sticky头部变色的核心机制是JavaScript判断滚动位置触发CSS类切换，因position:sticky本身不感知滚动；IntersectionObserver通过监听哨兵元素交叠状态实现高性能、精准变色，避免scroll事件卡顿。
sticky 头部变色的核心机制是什么
CSS 的 position: sticky 本身不触发状态变化，它只是让元素在滚动中“粘”在视口某处；变色必须依赖滚动位置判断。浏览器原生不提供「滚动到某位置时触发 CSS 类切换」的能力，所以实际要靠 JavaScript 监听 scroll 事件，结合 getBoundingClientRect() 或 pageYOffset 判断头部是否已到达目标节点（比如 banner、hero 区域）的顶部。
关键不是“sticky 怎么变色”，而是“怎么知道该变色了”。sticky 只负责定位，状态判定得自己写逻辑。
如何用 IntersectionObserver 判断头部该变色了
相比手动监听 scroll，IntersectionObserver 更轻量、性能更好，也更精准——它能告诉你某个参考元素（如 .section-hero）何时进入/离开视口。
典型做法是：把一个不可见的哨兵元素放在目标位置（比如 hero 区块顶部），让 Observer 监听它与视口的交叠状态：
const sentinel = document.querySelector('.sentinel');
const header = document.querySelector('header');
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
header.classList.remove('scrolled');
} else {
header.classList.add('scrolled');
}
},
{ threshold: 0, rootMargin: '0px 0px -100% 0px' }
);
observer.observe(sentinel);
-
rootMargin: '0px 0px -100% 0px'表示把哨兵的“触发线”上移到其顶部——即哨兵一露头就认为已到达目标位置 - 避免监听
window.scroll，尤其在移动端容易卡顿 - 如果目标位置是固定像素（如滚动 80px 后变色），用
pageYOffset更直接，但缺乏语义，后期改版难维护
为什么直接给 sticky 元素加 transition 有时无效
常见错误：给 header 设置 transition: background-color 0.3s，但颜色死活不渐变。原因通常是：
- 背景色从
transparent变成#fff，而transparent不是颜色值，是“无颜色”，部分浏览器不支持该 transition - 用了
background简写，但初始值含图片或渐变，导致 transition 无法匹配起止状态 - header 在 sticky 激活瞬间重绘，触发了浏览器的“transition 禁用优化”（尤其 Safari）
稳妥写法是显式声明 background-color，并确保起始值为具体颜色（如 rgba(255,255,255,0) 而非 transparent）：
立即学习“前端免费学习笔记（深入）”；
header {
background-color: rgba(255, 255, 255, 0);
transition: background-color 0.3s ease;
}
header.scrolled {
background-color: #fff;
}
移动端 iOS Safari 的 sticky + 变色兼容性坑
iOS 15.4+ 修复了大部分 position: sticky 问题，但仍有两个真实存在的陷阱：
- 如果父容器有
transform、perspective或filter，会创建新的层叠上下文，导致 sticky 失效——检查.layout或main是否意外加了transform: translateZ(0) - 变色后 header 高度微变（比如加了 box-shadow），可能引发 iOS 上的“闪烁重绘”，建议用
will-change: background-color提前提示渲染引擎 - IntersectionObserver 在旧版 iOS Safari（rootMargin 负值，需降级为 scroll 监听 +
offsetTop计算
最常被忽略的一点：变色逻辑和 sticky 激活不是同一时刻。sticky 从“相对定位”切到“粘性定位”发生在元素顶部触达容器边界时，而你的变色触发点（比如 hero 区顶部）往往比这个边界高几十像素——这两个位置必须分开测量，不能默认等同。
