Sticky定位是相对定位与固定定位的结合，元素在滚动至特定阈值时吸附在视口指定位置。1. 设置top、bottom等偏移值方可生效；2. 元素仍处于文档流中，不脱离布局；3. 常用于导航栏吸顶、表格表头冻结、侧边栏标题跟随等场景；4. 父容器避免overflow:hidden或transform，以防失效；5. 需注意浏览器兼容性，尤其移动端safari对嵌套sticky支持较弱。该特性无需JavaScript即可实现高效滚动交互。
在css中，sticky定位是一种特殊的定位方式，结合滚动（scroll）效果可以实现元素在滚动过程中“吸附”在视口特定位置的效果。它既像相对定位（relative），又在满足条件时表现为固定定位（fixed），非常适合做导航栏、侧边栏标题等交互设计。
什么是sticky定位
position: sticky; 是 relative 和 fixed 的结合体。元素默认表现如同 position: relative，但当页面滚动到某个阈值时，它会变成 position: fixed，直到离开其父容器或滚动结束。
关键点：
- 必须设置一个阈值（如 top、bottom、left 或 right）才能生效。
- 元素仍在文档流中，不会脱离布局。
- 依赖其最近的可滚动祖先容器（通常是 body 或 overflow 设置为 scroll/auto 的容器）。
示例：
.sticky-element { position: sticky; top: 10px; }
当该元素距离视口顶部小于等于10px时，它将“粘”在顶部随页面滚动而固定。
立即学习“前端免费学习笔记（深入）”；
与滚动效果结合的实际应用
Sticky 定位最常见的用途是配合页面滚动实现动态视觉反馈。以下是几个典型场景：
1. 导航栏吸顶
页面滚动时，导航栏到达顶部后固定不动。
.navbar { position: sticky; top: 0; background: white; z-index: 100; }
这样用户滚动页面时，导航始终可见，提升体验。
2. 表格表头冻结
长表格滚动时，表头保持可见。
th { position: sticky; top: 0; background: #f0f0f0; z-index: 10; }
每个表头单元格都会在滚动到顶部时固定，形成“冻结表头”效果。
3. 侧边栏章节标题跟随
内容分组标题在滚动时停留在顶部，直到下一个标题出现。
.section-title { position: sticky; top: 0; background: #fff; }
多个 sticky 标题会依次“交接”，实现平滑过渡。
注意事项与兼容性
虽然 sticky 定位非常实用，但使用时需注意以下几点：
- 父容器不能有
overflow: hidden或transform等限制，否则 sticky 可能失效。 - 需要明确设置
top等偏移值，否则不起作用。 - 在某些旧版浏览器中支持不佳，建议加前缀或检测回退。
- 移动端 Safari 对 nested sticky 支持较弱，需测试验证。
总结
Sticky 定位 + 滚动效果是一种轻量且高效的交互手段，无需 JavaScript 即可实现常见的“吸顶”功能。只要合理设置 top 值并注意容器限制，就能让页面元素在滚动中自然响应用户行为。
基本上就这些，不复杂但容易忽略细节。