position: sticky 是 CSS 中一种结合相对定位与固定定位的布局方式，元素在滚动到设定阈值（如 top: 0）时吸附在视口特定位置。它仍属于文档流，常用于导航栏、表格表头冻结、侧边栏跟随等场景。使用时需设置 top、bottom 等偏移值，且父容器不能有 overflow: hidden 或 overflow: auto，以确保生效。现代浏览器支持良好，移动端适配佳，IE 不支持需降级处理。
在网页开发中，滚动吸附（Sticky Positioning）是一种常见的交互效果，可以让元素在滚动到特定位置时“吸附”在视口的某个位置，比如导航栏固定在顶部。这种效果可以通过 CSS 的 position: sticky 实现，无需 JavaScript，简单高效。
什么是 position: sticky？
position: sticky 是一种相对定位和固定定位的结合体。元素在正常文档流中表现为相对定位（relative），当页面滚动到某个阈值时，它会变成类似固定定位（fixed）的行为，停留在指定位置直到其父容器移出视口。
要使用 sticky 定位，必须设置一个阈值（如 top、bottom、left 或 right），否则它不会生效。
基本语法与使用方法
关键点：sticky 需要配合 top / bottom 等偏移属性才能起作用。示例：让导航栏在滚动时吸附在页面顶部
立即学习“前端免费学习笔记（深入）”；
<style>
.navbar {
position: sticky;
top: 0;
background-color: #333;
color: white;
padding: 10px;
z-index: 100;
}
</style>
<p><div class="navbar">导航栏</div>
<p>这里是一些内容...</p></p>说明：
- top: 0 表示当元素滚动到距离视口顶部 0px 时，开始“吸附”在顶部。
- 元素仍属于文档流，不会像 fixed 那样脱离布局。
- z-index 可确保它显示在其他内容之上。
常见应用场景
sticky 定位适用于多种场景：
- 侧边栏跟随：侧边目录或广告栏随页面滚动停留在可视区域。
- 表格表头冻结：长表格中，表头在滚动时保持可见。
- 标签页或选项卡吸附：分类切换栏在滚动到顶部时固定。
表格头示例：
<table>
<thead>
<tr style="position: sticky; top: 0; background: white;">
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr><td>张三</td><td>25</td></tr>
<!-- 更多行 -->
</tbody>
</table>
注意事项与兼容性
虽然 sticky 支持良好，但仍需注意以下几点：
- 父元素不能有 overflow: hidden 或 overflow: auto，否则 sticky 可能失效。
- 确保父容器有足够的高度，让滚动行为可以触发。
- 在部分旧版浏览器（如 IE）中不支持，需做降级处理或使用 JS 替代方案。
- 移动端表现良好，适合响应式设计。
基本上就这些。只要记住设置 position: sticky 和 top/bottom 值，就能轻松实现滚动吸附效果，不复杂但容易忽略细节。
