sticky 是 position 属性的合法值，用于滚动吸附定位；scroll 不是定位值，而是 overflow、scroll-behavior 等滚动相关属性的关键词，二者语义层级不同，不可直接对比定位效果。
sticky 是定位属性，scroll 不是 CSS 定位值
很多人搜 sticky 和 scroll 的区别，其实是混淆了概念：sticky 是 position 属性的合法取值（如 position: sticky），而 scroll 根本不是 position 的可选值——它属于 overflow 或滚动行为相关的关键词（比如 scroll-behavior、scroll-snap-type），也出现在 JS 的 window.scroll() 等 API 中。两者不在同一语义层，不能直接对比“定位效果”。真正该比的是 sticky 和 fixed、relative 这类定位行为。
sticky 的触发条件和常见失效原因
position: sticky 表现为“滚动到临界点时吸附，继续滚动后脱离”，但它高度依赖父容器的滚动上下文和显式约束。以下情况会导致它完全不生效：
- 父级元素没有设置
overflow: visible（默认值）以外的滚动限制，比如overflow: hidden、auto或scroll会截断粘性行为 - 没指定
top、bottom、left或right偏移量（至少一个必须有具体值，例如top: 0） - 元素本身或任意祖先节点设置了
transform、perspective、filter（非none）等将触发新层叠上下文/格式化上下文的属性 - 父容器高度不足以产生滚动（即内容没溢出，无法触发滚动）
/* ✅ 正确示例：sticky 导航栏 */
.navbar {
position: sticky;
top: 0;
z-index: 100;
background: white;
}
/ ❌ 失效场景之一：父容器 overflow: hidden /
.container {
overflow: hidden; / 这会让 .navbar 永远不 sticky /
}
scroll 相关属性的实际作用位置
当你看到 scroll 出现在 CSS 中，它几乎总是出现在这些地方：
-
overflow: scroll/auto：控制容器是否显示滚动条（scroll强制显示，auto按需显示） -
scroll-behavior: smooth：让a[href^="#"]锚点跳转或element.scrollIntoView()变成平滑滚动 -
scroll-snap-type: y mandatory：配合scroll-snap-align实现滚动停靠（常用于轮播、分页视图） -
overscroll-behavior: contain：阻止下拉刷新或滚动穿透（比如弹窗内滚动到底部时，不触发背景页滚动）
它们都不改变元素在文档流中的定位方式，只影响滚动容器的行为或交互反馈。
立即学习“前端免费学习笔记（深入）”；
什么时候该用 sticky，而不是靠 JS 模拟 scroll 监听
用 position: sticky 是声明式、原生、低开销的方案；而监听 scroll 事件 + 动态切 position: fixed 是命令式、易出竞态、需手动处理尺寸/层级/重绘的旧方案。除非你遇到这些情况，否则优先用 sticky：
- 需要响应式吸附（比如表格列头在横向滚动时固定，同时纵向滚动时也固定）—— sticky 支持
top和left同时设置 - 要兼容 Safari 15.4+、Chrome 56+、Firefox 59+（现代浏览器全覆盖，无需 polyfill）
- 父容器结构稳定，能确保不触发 sticky 的失效条件
但如果要实现“滚动 200px 后才开始 sticky”或者“粘住后加阴影动画”，sticky 本身做不到，这时才需要 scroll 事件配合 getBoundingClientRect() 手动判断位置。
