sticky元素未粘住的根本原因是父容器设置了overflow非visible或transform等创建新层叠上下文的属性，需逐层检查并重置为overflow: visible和transform: none。
sticky元素为什么没粘住？检查父容器的overflow和transform
很多情况下 position: sticky 看似写了却完全不生效，根本原因不是CSS写错了，而是父级容器“偷偷”阻止了粘性行为。常见罪魁祸首是：overflow 不为 visible（比如 hidden、auto），或者父元素有 transform、filter、will-change 这类创建新层叠上下文的属性。
苹果官网那种长页滚动中文字始终居中粘着的效果，依赖的是干净的祖先链——从目标元素一路向上，所有父容器都不能带上述干扰属性。尤其要注意 CSS 框架（如 Tailwind 的 overflow-hidden 工具类）或动画库自动加的 transform: translateZ(0)。
- 用浏览器开发者工具逐层检查目标元素的
Computed面板，看position是否被降级为static - 临时给所有可疑父级加
overflow: visible !important和transform: none !important快速验证 - 若必须保留
overflow: hidden（比如轮播图容器），就把 sticky 元素移出该容器，用定位+JS微调补位，别硬扛
滚动视差颜色变化靠什么？不是scroll()事件，是clamp() + scroll-timeline
苹果官网的文字渐变不是靠监听 scroll 事件然后反复改 color，那样卡顿且难精准控制节奏。他们用的是原生 CSS 滚动驱动动画：通过 @scroll-timeline 定义滚动范围，再用 animation-timeline 绑定到关键帧动画上，最后用 clamp() 或 color-mix() 实现平滑插值。
目前支持度有限（Chrome 115+、Safari 17.4+），但它是唯一能避免 JS 主线程阻塞、实现60fps渐变的方式。别用 IntersectionObserver 去模拟——它触发时机粗、延迟高，做精细色值过渡会明显跳变。
立即学习“前端免费学习笔记（深入）”；
- 基础结构：
@scroll-timeline name { source: selector(...); orientation: "vertical"; start: 0; end: 100%; } - 动画里用
color: color-mix(in srgb, #000 50%, #fff 50%)配合animation-timeline: name - 旧版兼容方案只能退回到
transform: translateY()+opacity动画，颜色渐变更建议用两层文字叠在一起，分别设不同透明度动画
渐变色怎么不发灰？sRGB和display-p3色彩空间别混用
苹果官网文字在深色/浅色背景间过渡时颜色饱满不发灰，关键在于明确声明色彩空间。Mac/iOS 默认用 display-p3 色域，而多数CSS写法默认走 srgb，直接写 color: #000000 或 rgb(0,0,0) 会被强制映射，导致高光处细节丢失。
真正起作用的是带色彩空间前缀的写法：color(display-p3 0 0 0) 或 color-mix(in display-p3, ...)。没声明就等于放弃P3设备的色域优势，尤其对白色、浅灰这类临界色，差异肉眼可见。
- 检查当前设备是否支持：
CSS.supports('color', 'display-p3 0 0 0') - 渐变动画中，起点和终点都必须同属一个色彩空间，混用
rgb()和color(display-p3)会导致中间插值异常 - Safari 对
color(display-p3)支持稳定，Chrome 需开启chrome://flags/#enable-experimental-web-platform-features
文字粘性+视差组合时，line-height和font-size别用px单位
苹果官网那种文字在滚动中始终“钉”在视口中央、大小随距离微妙缩放的效果，底层依赖的是相对单位对视口变化的响应性。一旦用了 px 固定行高或字号，滚动过程中文字就会在粘性锚点处“抖动”或“错位”，因为 sticky 计算位置时不会重排，而视差动画又在动态改尺寸——两者节奏不同步。
必须统一用 rem、em 或视口单位（vh/vmax），让字体系统本身参与滚动响应。另外，line-height 别设具体数值（如 1.2），改用无单位数字或 clamp() 包裹，否则 Safari 在 sticky 元素内会错误继承父级行高。
- 字号推荐：
font-size: clamp(1.5rem, 4vw, 3.5rem)—— 小屏保可读，大屏不撑爆 - 行高建议：
line-height: 1.15（无单位）或line-height: clamp(1.1, 1.25vw, 1.3) - 避免在 sticky 元素内部用
margin-top微调垂直位置，改用padding-top或transform: translateY()更可控
滚动粘性不是加个 sticky 就完事，它和视差、色彩、排版单位绑在一起，改其中一处常会牵出三处bug。最易忽略的是祖先容器的 overflow 和色彩空间声明——这两点不先清掉，后面所有渐变和定位都是在修修补补。
