使用 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 的行为受其祖先元素影响，有几点关键限制：

立即学习“前端免费学习笔记（深入）”；

• 父元素不能有 overflow: hidden 或 overflow: auto，否则会阻止 sticky 生效
• sticky 元素必须位于一个足够高的容器中，确保可以滚动出视口范围
• sticky 只在其最近的可滚动祖先内起作用

3. 实际应用场景

常见的使用场景包括导航栏、侧边栏标题、表格表头等需要跟随滚动提示内容的部分。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

27

查看详情

例如：表格表头吸附

 .table-header {   position: sticky;   top: 0;   background: white;   z-index: 10; } 

这样当用户滚动表格时，表头会停留在页面顶部，直到被下一行内容推走。

4. 浏览器兼容性与注意事项

现代浏览器普遍支持 sticky，但某些旧版本 Safari 需要添加 -webkit- 前缀。

• 移动端 Safari 对 sticky 支持较好，但嵌套滚动中可能表现异常
• 避免在 transform、flex 或 grid 子项中不当使用，可能导致失效
• 测试时建议在真实滚动容器中验证行为

基本上就这些，只要设置好 position: sticky 和对应的 top 等偏移值，再注意父级容器的 overflow 设置，就能稳定实现滚动吸附效果。

以上就是在