设置 position: sticky 并指定 top 值可使元素在滚动到距视口顶部指定距离时固定，如 top: 10px 表示距离 10px 时开始吸附，常用于导航栏或标题吸顶效果。
在CSS中，sticky 定位元素可以通过设置 top 属性来定义其相对于视口顶部的偏移位置。当元素滚动到该位置时，它会“粘”在视口顶部，直到父容器离开视口为止。
使用 top 设置 sticky 元素的顶部偏移
要让一个元素在滚动时固定在距离视口顶部一定距离的位置，只需将其 position 设置为 sticky，并指定 top 值：
.sticky-element {
position: sticky;
top: 10px; /* 元素距离视口顶部 10px 时开始固定 */
}
这个 top: 10px 表示：当元素的上边缘滚动到距离视口顶部 10px 时，它就会停止滚动并固定在这个位置，直到其父容器不再可见或滚动方向改变。
常见应用场景和注意事项
- sticky 元素必须有 top、bottom、left 或 right 中至少一个偏移值才能生效，否则会被当作 relative 处理。
- top 值可以是 px、rem、em、% 等单位，根据设计需求选择。
- 父容器不能有 overflow: hidden、overflow: auto 或 transform 等属性，否则可能破坏 sticky 的行为。
- 多个 sticky 元素在同一滚动容器中会依次堆叠固定。
实际例子：导航栏吸顶
比如你想做一个文章目录，滚动时标题始终贴在顶部：
立即学习“前端免费学习笔记（深入）”；
.section-title {
position: sticky;
top: 0;
background: white;
padding: 10px 0;
z-index: 10;
}
这样每个标题在到达顶部时都会停留，直到下一个标题把它“推”上去。
基本上就这些，关键是设置正确的 top 值，并确保父级容器支持 sticky 定位。不复杂但容易忽略细节。
