position: sticky 吸顶失效主因是漏设 top、父容器干扰或滚动上下文被切断；必须配 top（如 top: 0），且父级不能有 overflow: hidden、transform 等破坏滚动上下文的样式。
position: sticky 能直接实现吸顶，但写上就生效？不是。90% 的失效都卡在 top 漏设、父容器干扰或滚动上下文被切断。
为什么写了 position: sticky 却完全不吸顶
最常见原因是只写了 position: sticky，没配 top（或 bottom/left/right）。浏览器直接回退为 position: relative，毫无粘性行为。
-
top: 0是最稳妥的起点，表示元素顶部到达视口顶部时触发吸附 - 不能同时写
top和bottom，部分浏览器会整条声明忽略 - 打开 DevTools → Elements → Computed 面板，确认
position最终值是不是sticky；如果不是，说明被祖先节点干扰了
top 值怎么设才对：场景与取值逻辑
top 不是“固定在顶部多少像素”，而是“滚动到距离视口顶部多少像素时开始吸附”。它的实际效果取决于滚动上下文和父容器行为。
- 导航栏吸顶：用
top: 0，最直观也最稳定 - 下方有固定高度 header（比如 64px）：用
top: 64px，避免遮挡 - 想实现“滚动到底部才吸附”（stick-to-bottom）：需动态计算
top值，等于window.innerHeight - element.offsetHeight，此时必须配合 JS 更新样式，纯 CSS 无法自适应视口变化 - 表格表头固定：给
<th> 加 <code>position: sticky; top: 0;，但父<thead> 不能设 <code>overflow: hidden父容器哪些样式会让
position: sticky直接失效position: sticky的吸附范围由**最近的、可滚动的、非 static 定位祖先**决定。一旦父级破坏这个上下文，吸附就断了。-
overflow: hidden、overflow: auto或overflow: scroll的父容器（尤其高度受限时），可能截断滚动流，导致 sticky 提前终止 -
transform、filter、will-change会创建新层叠上下文，使 sticky 失效 - flex 或 grid 容器作为父级时，若未显式设
align-items: flex-start，子元素默认居中，影响top计算基准 - body 上残留的
overflow: hidden（比如模态框关闭后没清除），全局静默干扰所有 sticky 元素
移动端兼容性兜底怎么做
iOS Safari 15.4+、Chrome 56+ 原生支持良好，但 iOS 15.2 及更早、微信 8.0.22 以下 WebView 仍会忽略
position: sticky。这时候得降级为 JS 控制。- 监听
scroll，用element.getBoundingClientRect().top判断是否 ≤ 0 - 触发时动态添加
.is-sticky类，CSS 中定义.is-sticky { position: fixed; top: 0; } - 务必用
requestAnimationFrame包裹 scroll 回调，否则安卓低端机明显卡顿 - 注意 fixed 后脱离文档流，可能造成页面“跳动”，建议提前记录原位置并补上占位
<div style="height: 60px"></div>
真正难的不是写那三行 CSS，而是排查谁悄悄切掉了滚动上下文——有时候一个没清掉的
transform或一行残留的overflow: hidden就能让整个吸顶逻辑静默崩溃。 -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
