标准答案
- position: sticky 会先按普通流布局,滚动到指定阈值后表现得像 fixed。
- 必须设置 top、bottom、left 或 right 之一,否则没有粘滞阈值。
- sticky 相对最近的滚动容器生效,父级 overflow: auto、hidden、scroll 可能改变参考容器。
- 父容器高度不足时,sticky 没有足够滚动空间表现出粘滞效果。
- 还要检查 z-index、层叠上下文、表格结构和 transform 等因素。
题目解析
这题要按滚动容器、阈值、父级空间和层叠关系逐层排查。
sticky 不是 viewport fixed,它受父级滚动和包含块影响更明显。
代码示例
一个可工作的 sticky 至少要有定位阈值。
CSS
.sidebar {
position: sticky;
top: 16px;
align-self: start;
}常见误区
- 只写 position: sticky,没有写 top。
- 父级设置 overflow: hidden 后,sticky 的滚动参考发生变化。
- 父容器和 sticky 元素高度接近,没有粘滞空间。