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 值并注意容器限制，就能让页面元素在滚动中自然响应用户行为。
基本上就这些，不复杂但容易忽略细节。
