时间轴中sticky“卡半截”或不粘，主因是结构天然触发失效条件：flex/grid父容器未设align-items:flex-start、祖先含transform/filter/contain等切断滚动上下文的属性，或容器缺失明确height/max-height+overflow:auto滚动能力。
为什么时间轴里用sticky会“卡半截”或完全不粘？
不是position: sticky写错了，而是时间轴结构天然容易触发 sticky 失效条件。典型表现是：线条只在滚动开头“粘”一下，之后就跟着滚走；或者整个时间轴条纹不动、颜色填充不随滚动变化。
根本原因是时间轴常嵌套在 flex 容器、grid 容器或带 transform 的动效父层中 —— 这些都会切断 sticky 的滚动上下文链。
- 时间轴容器（比如
.timeline）必须有明确的滚动能力：设height或max-height+overflow: auto，不能靠 body 滚动来驱动 sticky - 时间轴项（
.timeline-item）的父容器不能是display: flex且未设align-items: flex-start—— 否则 item 初始位置被居中，top: 0实际偏移量为负，粘性阈值失效 - 绝对不能在任意祖先上写
transform: translateY(0)或filter: opacity(1)—— Safari 和 Chrome 都会因此禁用 sticky
如何用sticky实现“滚动即填充”的时间轴线条效果？
纯 CSS 时间轴填充效果依赖两个 sticky 层级的错位：基线固定，活动线靠 sticky + 绝对定位 + overflow: clip 裁剪实现“向上推入”视觉。
关键不是单个元素 sticky，而是让活动线容器 sticky，再让它内部的线条用 position: absolute 从底部往上延伸。
- 外层时间轴容器需设
overflow: clip（不是hidden，后者会直接禁用 sticky） - 每个
.timeline-point包裹一个.active-line，其父容器设position: sticky; top: 0 -
.active-line本身用position: absolute; bottom: 0; height: 100%; width: 2px; background: #3b82f6;，初始时被父容器裁剪，滚动后逐步露出 - 基线（
.baseline）用普通position: relative+z-index: 1，确保始终在底层
sticky 在 Safari 中失效怎么办？
Safari 对 sticky 的限制比 Chrome 严格得多，尤其对 contain 和 backface-visibility 敏感。常见错误是加了 contain: layout style paint 优化渲染，结果整个时间轴粘不住。
- 必须加
position: -webkit-sticky前缀，且放在position: sticky之前 - 检查所有祖先元素是否含
contain: layout、contain: paint或backface-visibility: hidden—— 全部删掉 - 避免用
margin-top: auto或align-self: center控制时间轴项垂直位置，改用padding-top或flex-start - 若仍不行，临时降级：给 Safari 加
@supports not (position: sticky) { .timeline-item { position: relative; } }
sticky 时间轴和 fixed 时间轴的区别在哪？
视觉相似，行为完全不同。fixed 是脱离文档流、永远钉在视口；sticky 是“借势而为”，它始终属于文档流，一旦父容器滚出视口，它立刻恢复滚动跟随。
- 时间轴用
position: fixed会导致内容错位：当用户滚动到中间某项，fixed 元素会遮挡后续内容，且无法响应父容器高度变化 - sticky 时间轴能自然退出粘性状态 —— 比如时间轴容器只有 500px 高，滚动到底部时，最后一项会自动“松开”，继续随文档流滚动
- 性能上，sticky 不强制重绘整个视口，但对父容器渲染树压力更大；fixed 则可能引发频繁合成层切换，尤其在移动端
真正难的不是写对那几行 CSS，而是把时间轴每一层的 display、overflow、transform、contain 都捋清楚 —— 少一个条件，sticky 就静默失效，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
