使用css的position: sticky可实现多层吸顶，关键在于设置正确的top值和dom结构。1. sticky定位结合relative与fixed特性，需设定top等偏移量生效，且父容器不能有overflow限制。2. 多个sticky元素按顺序吸附，通过递增top值实现接力效果，如导航栏top:0、标签页top:40px、筛选栏top:80px。3. 注意top值累加前面元素高度，避免父级overflow:hidden，合理设置z-index确保层级正确。4. 适用于电商页面等场景，依次固定导航、分类、筛选等模块，提升用户体验。
使用 CSS 的 position: sticky 可以轻松实现多层吸顶（即多个元素依次在滚动时吸附在视口顶部）效果，无需 JavaScript。关键在于正确设置 top 值和 DOM 结构。
1. 基本原理：sticky 定位的工作方式
sticky 定位是 relative 和 fixed 的结合体。元素在正常文档流中（relative），当滚动到特定阈值（如 top: 0）时，变为固定定位（类似 fixed），直到其父容器脱离视口。
- 必须设置
top、bottom、left或right才能生效 - 父元素不能有
overflow: hidden、overflow: auto等限制（否则会失效） - 多个 sticky 元素会根据层级和
top值“接力”吸附
2. 实现多层吸顶布局的结构与样式
假设我们有三个需要吸顶的模块：导航栏、标签页、筛选栏。它们按顺序排列，希望在滚动时依次吸附在顶部。
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <header class="sticky-nav">主导航</header> <section class="sticky-tabs">标签页</section> <section class="sticky-filters">筛选栏</section> <main class="content">内容区（很长）</main> </div>
对应的 CSS：
.sticky-nav {
position: sticky;
top: 0;
background: #3498db;
z-index: 10;
}
<p>.sticky-tabs {
position: sticky;
top: 40px; /<em> 高于第一个的高度 </em>/
background: #e74c3c;
z-index: 9;
}</p><p>.sticky-filters {
position: sticky;
top: 80px; /<em> 高于前两个总高度 </em>/
background: #2ecc71;
z-index: 8;
}</p>这样，当页面滚动时：
- 先滚动过普通内容，
sticky-nav到达顶部时吸附 - 继续滚动，
sticky-tabs到达距离顶部 40px 时吸附，此时nav已被“顶上去” - 再往下，
filters在 80px 处吸附，前两个被逐级推上
3. 关键注意事项
要确保多层 sticky 正常工作，注意以下几点：
-
top 值累加：每个 sticky 元素的
top应等于前面所有吸顶元素的总高度 -
避免 overflow 限制：父容器不要设
overflow: hidden或overflow: scroll，否则 sticky 会失效 -
z-index 控制层级：越早吸顶的元素应有更高
z-index，避免被后面的盖住 -
高度固定或预知：sticky 吸附依赖精确的
top计算，动态高度需 JS 配合
4. 实际应用场景示例
常见于电商商品页：
- 顶部导航栏（top: 0）
- 商品分类 tab（top: 50px）
- 价格/优惠信息栏（top: 100px）
- 评论标题栏（top: 150px）
随着用户下滑，这些模块依次停靠，形成流畅的吸顶体验。
基本上就这些。只要结构清晰、top 值合理、避免 overflow 陷阱，CSS sticky 实现多层吸顶非常简洁高效。
