position: sticky 不吸顶的根本原因是父容器可滚动范围与自身计算边界不匹配：需设置 top 值、父容器不能 overflow: hidden/clip、高度需明确，且存在浏览器兼容性限制（如 IE 不支持、Android 4.4–6.0 WebView 基本不支持）。
HTML 吸顶（）和“滚动固定”（通常指）不是一回事，也不能互相替代；前者依赖父容器流式上下文，后者完全脱离文档流——混用或误判兼容性会直接导致吸顶失效。
为什么
在某些滚动下不吸顶？
根本原因是它不是“一设就吸”，而是受制于**父容器的可滚动范围 + 自身计算边界**：
元素必须有明确的“吸顶临界点”，即
（或
）值，且该值需在父容器滚动时能被触发（例如
表示滚到父容器顶部时吸附）
父容器不能是
或
，否则滚动被截断，
失去触发条件
父容器高度不能为
或未设定（如仅靠内容撑开但未设置
），否则浏览器无法计算“何时该吸”
Chrome 早期版本（transform 父元素内的
支持不稳定，现虽已修复，但若父级有
等 hack，仍可能意外禁用
能替代吸顶吗？
能“固定显示”，但不能“吸顶”——它从不参与文档流，也不随父容器滚动边界变化而切换状态：
始终相对于视口定位，哪怕父容器只滚动了 10px，它也立刻“跳走”，无法实现“先随文档流、再固定”的自然过渡
移动端 Safari 对
在
聚焦/键盘弹出时行为异常（常错位或消失），而
不受影响
如果强行用
模拟吸顶，需监听
+ 计算
+ 动态切
，代码量大、性能差、易漏边界（如快速滚动、iOS 回弹）
如何判断当前浏览器是否真正支持
？
不能只查
，因为部分旧版 Safari（15.4–15.6）返回
却存在渲染 bug（吸顶后内容错位或闪烁）：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
真实检测建议用 CSS 测试类 + JS 验证渲染行为：
Android WebView（尤其 4.4–6.0）基本不支持
，必须降级为 JS 滚动监听方案
若项目需兼容 IE，
完全不可用（IE 无支持），
是唯一选择，但要接受体验妥协
吸顶真正的复杂点不在写法，而在“它什么时候该吸、什么时候不该吸”——这个决策权不在你写的
值里，而在父容器的盒模型、滚动链、以及各端渲染引擎对“粘性区域”的解释差异上。一个
元素在 Chrome 正常，在 Safari 卡半截，往往不是代码错了，是它的某个祖先节点悄悄加了
或
。
position: stickyposition: fixedposition: stickystickytopbottomtop: 0overflow: hiddenoverflow: clipsticky0min-heightstickytransform: translateZ(0)position: fixedfixedfixedinputstickyfixedscrollgetBoundingClientRect()classposition: stickyCSS.supports('position', 'sticky')trueconst test = document.createElement('div');
test.style.cssText = 'position:sticky;top:0;height:1px;';
document.body.appendChild(test);
const isStickyWorking = test.getClientRects().length > 0;
document.body.removeChild(test);stickystickyfixedtopstickywill-change: transformcontain: paint