标准答案

  1. position: sticky 会先按普通流布局,滚动到指定阈值后表现得像 fixed。
  2. 必须设置 top、bottom、left 或 right 之一,否则没有粘滞阈值。
  3. sticky 相对最近的滚动容器生效,父级 overflow: auto、hidden、scroll 可能改变参考容器。
  4. 父容器高度不足时,sticky 没有足够滚动空间表现出粘滞效果。
  5. 还要检查 z-index、层叠上下文、表格结构和 transform 等因素。

题目解析

这题要按滚动容器、阈值、父级空间和层叠关系逐层排查。

sticky 不是 viewport fixed,它受父级滚动和包含块影响更明显。

代码示例

一个可工作的 sticky 至少要有定位阈值。

CSS
.sidebar {
  position: sticky;
  top: 16px;
  align-self: start;
}

常见误区

  • 只写 position: sticky,没有写 top。
  • 父级设置 overflow: hidden 后,sticky 的滚动参考发生变化。
  • 父容器和 sticky 元素高度接近,没有粘滞空间。

作者信息