深入理解 position: sticky

在早期的前端开发中，如果要实现一个“吸顶导航栏”（页面滚动到某处时，导航栏固定在顶部），我们不得不手写一堆 JavaScript 监听 scroll 事件，然后动态去切换 position: fixed。这种做法不仅代码臃肿，还经常因为 JS 线程与渲染线程的同步延迟导致页面出现“抖动”。

直到 CSS 原生支持了 position: sticky（粘性定位），这类问题迎刃而解。但如果你在实战中使用过它，大概率遇到过一种极其让人崩溃的现象：满心欢喜地在那敲下 position: sticky; top: 0;，结果一滑页面，它居然跟着滚走了，就像什么都没发生过一样！

要征服这个看似简单却“暗坑无数”的属性，我们需要搞懂它的核心机制以及它失效背后的真实原因。

什么是粘性定位？

position: sticky 并不是一种独立的定位方式，你可以把它看作是 position: relative (相对定位) 和 position: fixed (固定定位) 的完美结合体。

它的表现根据用户的滚动状态分为两个阶段：

  1. 未触发阈值（像 relative）：在元素正常处于视口内、未触碰你设定的边界前，它的表现和普通元素一样，静静地待在文档流里，占据着自己的空间。
  2. 触发并跨越阈值（像 fixed）：当你向下滚动，元素马上就要被滚出屏幕（比如到达了你预设的 top: 0）时，它瞬间“变脸”为类似 fixed 的状态，死死粘在你规定的位置，不再继续随屏幕滚动。

为什么 sticky 会离奇失效？（避坑指南）

这是本文的重头戏。如果你发现 sticky 不起作用，请严格对照以下三个“神坑”进行排查：

1. 致命缺陷：缺少“触发阈值”

很多新手只写了 position: sticky; 然后就去滑动屏幕了。浏览器此时一脸懵逼，因为它不知道你要在什么位置“粘”住它。 解法：必须搭配 top、bottom、left 或 right 中的至少一个属性。例如 top: 0（意思是：当元素距离其滚动容器顶部为 0 时开始粘附）。

  • 代码示例
import React from "react";

export default () => (
  <div style={{ height: "200px", overflowY: "auto", border: "1px solid #ccc", padding: "10px" }}>
    <div style={{ height: "400px", background: "#f5f5f5" }}>
      <div style={{ position: "sticky", background: "#ff7a59", color: "white", padding: "10px" }}>我设置了 sticky，但我没有设置 top！</div>
      <p style={{ marginTop: "20px", padding: "10px" }}>往下划，你会发现那个橘色方块直接跟着滚走了...</p>
    </div>
  </div>
);

2. 牢笼限制：父元素的高度

sticky 元素并不是无敌的全局 fixed，它有一个极其严格的约束：它的粘附生效范围，绝对不会超出其父元素的区块。 当它跟随页面滚动时，如果已经碰到底了（也就是父元素的底部），它就会乖乖地跟着父元素一起滚走，不再吸顶。

常见的案发现场： 假设你有一个包裹容器 A，里面除了你的 sticky 元素之外，没有别的兄弟元素（或者兄弟元素很少）。这时父元素 A 的高度被撑得和 sticky 元素一模一样高。这就好比被关在一个量身定制的无缝牢笼里，sticky 元素根本没有“滑行”的物理空间，表现出来自然就是不生效。 排查关键：检查它的直接父容器是不是高度不够。

  • 代码示例
import React from "react";

export default () => (
  <div style={{ height: "200px", overflowY: "auto", border: "1px solid #ccc", padding: "10px" }}>
    <div style={{ height: "400px", background: "#f5f5f5", padding: "10px" }}>
      <p style={{ marginBottom: "20px" }}>向下滚动查看效果...</p>

      {/* 这个灰色框就是父容器 A，它的高度和内部的橘色块一模一样高 */}
      <div style={{ background: "#ddd", border: "2px dashed #999" }}>
        <div style={{ position: "sticky", top: 0, background: "#ff7a59", color: "white", padding: "10px" }}>
          我的父元素(虚线框)和我一样高，我被困住了！
        </div>
      </div>

      <p style={{ marginTop: "150px" }}>（撑开底部高度）</p>
    </div>
  </div>
);

3. 最隐蔽的杀手：祖先节点的 overflow

这是实战中导致 sticky 阵亡率最高的原因。 sticky 的工作原理是：不断去寻找离自己最近的、具备滚动机制的祖先元素，并以此为参考系进行粘附。

如果你在沿途的任意一个祖先元素上（哪怕是根元素 <body> 或 <html>），设置了以下任意一个属性：

  • overflow: hidden
  • overflow: scroll
  • overflow: auto

浏览器就会认定“哦！原来你就是那个滚动容器”，从而把 sticky 的参考系锁定在这个祖先节点上。一旦此时真实滚动的其实是最外层窗口，你的 sticky 元素立刻完全失效。 排查关键：顺着 DOM 树一层层往上扒，看看是哪个该死的祖先元素被设置了 overflow 导致了“截胡”。

  • 代码示例
import React from "react";

export default () => (
  <div style={{ height: "200px", overflowY: "auto", border: "1px solid #ccc", padding: "10px" }}>
    {/* 这个包裹层由于某种原因加了 overflow: hidden，截断了 sticky 的参考系寻找过程 */}
    <div style={{ overflow: "hidden", background: "#f5f5f5", padding: "10px" }}>
      <div style={{ height: "400px" }}>
        <p style={{ marginBottom: "20px" }}>往下滚...</p>
        <div style={{ position: "sticky", top: 0, background: "#ff7a59", color: "white", padding: "10px" }}>
          即使我写了 sticky 和 top: 0，因为外面有 overflow: hidden，我还是失效了！
        </div>
        <p style={{ marginTop: "150px" }}>（撑开底部高度）</p>
      </div>
    </div>
  </div>
);

经典应用场景

  1. 表格表头吸顶（Sticky Headers）：最经典的应用，浏览超长数据表格时，让 <thead> 保持在顶部，方便用户对应列名。
  2. 通讯录字母索引（Section Headers）：像微信通讯录一样，往下划的时候 "A组" 的标题吸顶，等 "B组" 的人划上来时，"B" 把 "A" 顶上去自己吸顶。（这完美利用了 sticky 不会超出父元素的特性，A 和 B 分别放在不同的父级区块中）。
  3. 侧边栏跟随广告/目录：阅读长文章时，右侧的目录树或广告条跟着屏幕滚动并固定在某处，直到文章结束。

高频面试题剖析

Q：说说你对 position: sticky 的理解？以及在什么情况下它会失效？

回答思路：

  1. 点明本质：首先说明它是 relative 和 fixed 的结合体。
  2. 阐述机制：解释它在跨越设定的位置阈值（如 top: 0）前，处于文档流内（表现如 relative）；跨越阈值后，表现为固定在指定位置（表现如 fixed）。
  3. 抛出常见失效原因（重点）：
    • 第一点是语法层面的：开发者忘记设置阈值（仅仅写了 sticky 但没写 top 等），导致无法计算触发点。
    • 第二点是空间层面的：它的父元素高度和它自身高度一样大，导致粘附的活动范围为 0，无法滑动。
    • 第三点是参考系层面的（最常见）：它的任意祖先元素被设置了 overflow: hidden/auto/scroll，导致 sticky 找错了滚动的参考容器，从而在整个窗口级别的滚动中失效。
  4. 举一个实战例子：可以顺口提一句“微信通讯录分组索引”的交互，那是原生展示 sticky 父级边界特性的最佳例子。