使用 position: sticky 可实现滚动吸附，需配合 top 等偏移属性，且父容器不能有 overflow: hidden，常见于吸顶导航、表格表头等场景。
要实现元素在滚动过程中“吸附”在视口的某个位置，CSS 中的 position: sticky 是最直接有效的方法。它结合了相对定位和固定定位的特点，让元素在滚动到特定位置前保持正常文档流，到达临界点后变为“固定”状态。
1. 基本语法与使用条件
sticky 定位通过 position: sticky 来启用，但必须配合一个或多个偏移属性（如 top、bottom、left 或 right）才能生效。
常见用法：- top: 0 — 元素滚动到距离视口顶部 0px 时开始“吸顶”
- bottom: 0 — 元素在父容器底部附近时吸附到底部
示例代码：
.sticky-element {
position: -webkit-sticky; /* 兼容旧版 Safari */
position: sticky;
top: 10px;
}
2. 父级容器限制
sticky 的行为受其祖先元素影响，有几点关键限制：
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 父元素不能有 overflow: hidden 或 overflow: auto，否则会阻止 sticky 生效
- sticky 元素必须位于一个足够高的容器中，确保可以滚动出视口范围
- sticky 只在其最近的可滚动祖先内起作用
3. 实际应用场景
常见的使用场景包括导航栏、侧边栏标题、表格表头等需要跟随滚动提示内容的部分。
例如：表格表头吸附
.table-header {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
这样当用户滚动表格时，表头会停留在页面顶部，直到被下一行内容推走。
4. 浏览器兼容性与注意事项
现代浏览器普遍支持 sticky，但某些旧版本 Safari 需要添加 -webkit- 前缀。
- 移动端 Safari 对 sticky 支持较好，但嵌套滚动中可能表现异常
- 避免在 transform、flex 或 grid 子项中不当使用，可能导致失效
- 测试时建议在真实滚动容器中验证行为
基本上就这些，只要设置好 position: sticky 和对应的 top 等偏移值，再注意父级容器的 overflow 设置，就能稳定实现滚动吸附效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
