position: sticky失效最常见原因是父容器overflow非visible，即任意祖先设置了overflow:hidden/auto/scroll，导致sticky静默退化为relative；此外还需满足无transform干扰、有明确偏移值、父容器具备滚动上下文等共五个硬性条件。
position: sticky 能直接替代 scroll 监听 + class 切换实现按钮固定，但必须满足五个硬性条件，缺一不可；否则它会静默退化为 position: relative，连报错都不会有。
为什么写了 position: sticky 却完全不粘？
最常见原因不是 CSS 写错了，而是布局链断了——浏览器压根没触发 sticky 行为。典型表现：按钮随页面照常滚动，毫无“卡顿”或“吸附”迹象。
- 父容器设置了
overflow: hidden、overflow: auto或overflow: scroll→ sticky 被强制禁用（Safari 尤其敏感） - sticky 元素的任意祖先节点用了
transform、filter或perspective→ 创建新层叠上下文，中断粘性计算 - 元素自身是
display: table-cell、display: flex（未设align-items: start）或float→ 不在标准文档流中 - 没写
top/bottom/left/right中任意一个偏移值 → 仅position: sticky不生效 - 父容器没有滚动上下文：比如没设
height或max-height，也没配overflow-y: auto→ 浏览器无法判断“何时该粘”
长图文场景下 top 值怎么设才合理？
在长图文里固定按钮（如“返回顶部”、“分享”、“收藏”），top 不是越小越好。它决定按钮开始固定的垂直阈值，直接影响用户第一屏体验。
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
- 设
top: 0：按钮紧贴视口顶部，但可能和原生状态栏/浏览器地址栏重叠（尤其 iOS Safari） - 设
top: env(safe-area-inset-top)：适配刘海屏/全面屏，但需配合@supports降级 - 更稳妥的做法是
top: 16px或top: 24px，留出呼吸空间，也避开 header 阴影或 border - 避免用百分比或
auto：top: 10%和top: auto都会让 sticky 失效
如何验证 sticky 是否真在工作？
不能只看视觉效果。很多“看似粘住”的行为其实是 JS 模拟或 fixed 误用。打开开发者工具，逐项确认：
立即学习“前端免费学习笔记（深入）”；
- 选中按钮元素 → 查看
Computed面板里的position值：滚动过程中它必须在sticky和fixed之间切换（Chrome/Firefox 显示为sticky，实际渲染时浏览器内部切为 fixed） - 检查
offsetParent：如果变成null，说明它已脱离文档流 → 很可能是被 ancestor 的transform或contain干扰 - 滚动时观察元素
getBoundingClientRect().top：粘住期间该值应稳定在设定的top值附近（如top: 24px→ 返回约24） - 在 Safari 中额外检查是否加了
position: -webkit-sticky；iOS 15.4 之前版本不支持无前缀写法
和 JS 滚动监听比，sticky 真的更轻量吗？
是的，但前提是它没被布局条件拖垮。真正影响性能的不是 sticky 本身，而是它的父容器渲染树深度和 overflow 区域大小。
- sticky 由浏览器原生滚动管线处理，不触发重排（reflow），也不依赖
requestAnimationFrame调度 - 但如果父容器是
overflow: auto且内容极长（比如 1000 行表格），每次滚动都要重新计算粘性边界，开销会上升 - 对比 JS 方案：
scroll事件频繁触发 +getBoundingClientRect强制同步布局 + class 切换引发样式重算 → 卡顿风险高得多 - 真正容易被忽略的点：sticky 在
contain: layout style paint的容器内会被静默禁用（Safari 16.4+ 才部分修复），这个限制连 DevTools 都不提示
