position: sticky 结合 top 可实现元素滚动吸附效果，如导航栏固定、多层菜单接力粘附；需注意父容器不能有 overflow 或 transform 限制，且必须设置 top 值才能生效。
在 css 中，position: sticky 是一种特殊的定位方式，它结合了 relative 和 fixed 定位的特点。要让 sticky 生效，必须搭配 top（或其他方向属性如 bottom、left、right）来指定“粘性”触发的临界点。下面介绍几个实用的搭配技巧。
1. sticky + top 实现导航栏吸附
最常见的用法是让页面滚动时，导航栏在到达视口顶部时固定住。
关键代码：
position: sticky;
top: 0;
说明：元素在正常文档流中表现为 relative，当滚动到距离视口顶部 0px 时，变为 fixed 效果，停留在顶部。
立即学习“前端免费学习笔记（深入）”；
注意事项：
- 父容器不能有 overflow:hidden、overflow:scroll 或 transform 属性，否则 sticky 会失效。
- sticky 元素必须设置 top 值才能生效，只写 position: sticky 是没用的。
2. 使用 top 控制粘性触发高度
你可以通过调整 top 的值来控制元素何时“粘住”。
例如：
.top-bar {
position: sticky;
top: 10px;
}
表示当元素距离视口顶部还有 10px 时就开始固定。适合留出空间给其他头部元素（比如全局通知条）。
3. 多个 sticky 元素分层吸附
可以设置多个 sticky 元素，配合不同的 top 值，实现“接力式”吸附效果。
比如一个页面有主菜单和子菜单：
.main-nav { top: 0; }
.sub-nav { top: 50px; }
当页面滚动时，主菜单先贴顶，子菜单在其下方 50px 处贴住，不会覆盖主菜单。
4. 避免常见陷阱
sticky 不是万能的，使用时注意以下几点：
- 确保父容器没有限制粘性行为的样式（如 overflow: hidden）。
- sticky 只在它的父容器内生效，超出后会停止固定。
- 如果前面的内容太短，不足以触发滚动，sticky 不会表现出来。
- 在表格中使用时，需对 <th> 或 <td> 设置 sticky 和 top，可实现表头冻结。
基本上就这些。掌握 sticky 与 top 的配合，能轻松实现很多实用的交互效果，而且无需 javaScript。关键是理解它的触发机制和容器限制。不复杂但容易忽略细节。