009.position-sticky

position: sticky 是一种混合定位机制：它在元素进入视口之前是相对定位（relative），一旦滚动到临界值，就切换为固定定位（fixed）

简单来说就是：先跟着父元素走，滚到该停的位置就贴住

常见写法如下：

.sticky-header {
  position: sticky;
  top: 0;
}

这个 header 在滚动时“吸顶”，视觉效果如同 position: fixed，但它依然在文档流中

无法“粘住”的常见情况

错误写法	可能问题
position: sticky 没加 top	不触发粘附
父级有 overflow: hidden	限制粘附区域
sticky 在 flex 子项中使用	与方向冲突不触发
忘了加 z-index / background	被遮挡、视觉错位
误用 sticky 处理全局固定	该用 fixed 的场景用 sticky 会失效

父元素有 overflow: hidden/auto/scroll

.parent {
  overflow: hidden;
}
.child {
  position: sticky;
  top: 0;
}

这种结构下，.child 将永远无法“粘住”

原因是 sticky 的参考上下文是最近的可滚动祖先，而 overflow: hidden 等属性会导致容器成为新的“滚动上下文”，sticky 被限制在里面。

解决方法：不要给 sticky 的父级设置 overflow: hidden，或调整结构让 sticky 出现在没有滚动限制的区域。

sticky 的祖先 display: flex 且方向不匹配

<div class="container">
  <div class="sidebar">...</div>
  <div class="content">...</div>
</div>

.container {
  display: flex;
}
.sidebar {
  position: sticky;
  top: 0;
}

你希望 sidebar 在垂直方向粘住顶部，但却发现它根本不“sticky”。

关键在于：flex 布局的主轴方向与 sticky 的方向冲突时，会导致 sticky 无法触发。

解决方法：

• 确保 sticky 的方向（如 top/bottom）是主轴方向；
• 或者避免让 sticky 元素在横向 flex 容器中直接使用。

没有指定 top/left/right/bottom

这是最基本的问题，但常常被忽略。这段代码等于什么都没设置，因为你必须指定粘性的触发边界，否则就没有触发条件。

.sticky {
  position: sticky;
}

小技巧

结合 scroll-margin

sticky 和 scroll-margin 是一对黄金搭档。当你在跳转锚点时，元素可能会被“贴死”在顶部，体验很差。

.section-title {
  scroll-margin-top: 60px;
}

这个属性的意思是：在浏览器滚动到锚点时，距离顶部保留 60px 的空隙，刚好与 sticky 的吸顶位置对齐

js 模拟 sticky

sticky 模拟