position: sticky 不是“滚动到某像素值就触发”，而是“当元素的指定边界（如 top）与滚动容器的对应边缘对齐时”才开始粘住——这个对齐点就是阈值，它由你写的 top / bottom 值决定，且依赖父容器是否“放行”滚动上下文。
直接说结论： position: sticky 不是“滚动到某像素值就触发”，而是“当元素的指定边界（如 top）与滚动容器的对应边缘对齐时”才开始粘住——这个对齐点就是阈值，它由你写的 top / bottom 值决定，且依赖父容器是否“放行”滚动上下文。
为什么写了 position: sticky 却完全没反应
最常见原因是漏了关键参数或父容器“拦住了”行为：
- 只写
position: sticky，没加top、bottom、left或right—— 浏览器直接忽略，当position: relative处理 - 父容器设置了
overflow: hidden、overflow: auto或overflow: scroll，导致 sticky 元素被“关在”该容器内，无法响应文档级滚动 - 父容器高度太小（比如
height: 0或未撑开），元素还没来得及“进入滚动范围”就已到底，top: 0立刻生效，视觉上像没动过 - 父容器有
transform、filter或perspective，这些会创建新层叠上下文并禁用 sticky
top: 0 和 top: 20px 的实际差别在哪
区别不在“是否吸附”，而在“什么时候开始吸附”：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
top: 0：元素顶部一抵达视口顶部（即滚动距离 = 元素距视口顶部原始距离），立刻粘住 -
top: 20px：要等元素顶部向下滚动到离视口顶部还有 20px 时，才开始粘住——相当于预留了 20px 缓冲区，避免和导航栏/标题紧贴 - 如果想让广告在正文滚动过标题后才粘，别硬调
top值，而是把广告放进一个有明确高度的<section>里，再设top: 10px，这样阈值由该 section 的位置决定，更可控
如何让元素“滚动到自己底部才粘住”（stick-to-bottom）
原生 position: sticky 没有 bottom-threshold 这种机制。所谓“底部粘住”，本质是用 top 模拟出来的：
立即学习“前端免费学习笔记（深入）”；
- 设
top: calc(100vh - 60px)（假设元素高 60px）：当元素底部即将离开视口底部时，其顶部正好到达100vh - 60px位置，触发粘住 - 但
calc()在滚动中不重算，所以对响应式或动态高度不友好；更稳妥的是用 JavaScript 动态更新style.top，监听scroll+getBoundingClientRect() - 注意：不能靠
bottom: 0实现——它只在父容器高度固定、且你希望元素锚定在父容器底边时有效，和“滚动到页面底部才粘”不是一回事
兼容性和容易被忽略的细节
IE 完全不支持；Safari 15.4 之前有抖动；移动端旧版 iOS 可能错位。真正容易被忽略的是：
- sticky 元素必须有**可测量的高度**：空标签、仅含 inline 文本、没设
min-height，都可能导致吸附失效或位置漂移 - “最近的滚动祖先”不一定是
<body>：如果中间某层div设了overflow-y: auto，sticky 就只在这个 div 内部生效，和页面滚动无关 -
@supports (position: sticky)是必要防线，降级方案建议用position: relative而非fixed，避免脱离文档流引发后续布局塌陷
