CSS sticky定位通过position: sticky结合top等偏移值，使元素在滚动到特定位置时固定，常用于标题锚定和导航菜单；需注意父容器不能有overflow:hidden且元素需足够滚动空间。
在多段页面滚动中，让某些元素在特定区域内保持可见，是提升用户体验的重要方式。CSS 的 sticky 定位正是为此设计的，它结合了相对定位和固定定位的特点，使元素在滚动到视口特定位置时“粘”在屏幕上。
什么是 sticky 定位？
sticky 定位通过设置 position: sticky 实现。元素在正常文档流中表现为相对定位，当滚动到设定的偏移位置（如 top: 10px）时，变为类似 fixed 的固定行为，直到其父容器移出视口才解除。
关键点：
- 必须指定 top、bottom、left 或 right 才能生效
- 父元素不能有 overflow: hidden 或 overflow: auto，否则会阻止 sticky 行为
- 元素仍在文档流中，不会脱离布局
在多段内容中实现标题锚定
常见应用场景是文章的章节标题。当用户向下滚动时，当前章节标题固定在顶部，帮助用户明确所处位置。
立即学习“前端免费学习笔记（深入）”；
示例代码：
.section-title {
position: sticky;
top: 0;
background: white;
padding: 10px 0;
margin: 0;
z-index: 10;
}
每个章节使用此样式后，滚动时当前标题会停留在顶部，直到下一标题将其“推走”。
控制导航菜单在可视范围内停留
长页面常配有侧边或顶部导航。使用 sticky 可让导航随页面滚动而保留可见。
例如，一个左侧菜单：
.sidebar-nav {
position: sticky;
top: 20px;
height: fit-content;
}
这样菜单会在距离顶部 20px 时固定，直到页面或容器结束。
避免常见问题的技巧
sticky 看似简单，但实际使用中容易失效。注意以下几点：
- 检查父容器是否设置了 overflow: hidden —— 这是最常见的失效原因
- 确保元素有足够的滚动空间，否则无法触发 sticky
- 多个 sticky 元素会自然“交接”，无需 JavaScript 干预
- 在移动端测试兼容性，大多数现代浏览器都支持，但旧版本可能有问题
基本上就这些。合理使用 CSS sticky 定位，可以轻松实现滚动中保持元素可见的效果，无需复杂脚本，性能好且维护简单。不复杂但容易忽略。
