ios safari（尤其15.3及更早）不认body/html为滚动容器，sticky被降级为static；需手动创建全高可滚动父容器（height:100vh; overflow-y:scroll），设body{overflow:hidden}，并前置声明position:-webkit-sticky。
为什么写了 position: sticky 却不吸顶
不是语法写错了，而是 iOS Safari（尤其 15.3 及更早）根本不认 body 或 html 作为滚动容器来驱动 sticky。它会直接把 position: sticky 降级成 static——你在开发者工具里看到的 computed position 就是 static，不是渲染 bug，是引擎限制。
关键判断点：检查吸顶元素的直系父容器是否满足三个硬条件：
- 有明确高度（
height: 100vh或max-height: 60vh），不能只靠内容撑开 -
overflow-y: scroll（或auto），且内容实际溢出 - 自身及所有祖先没设
transform、filter、will-change、overflow: hidden
常见陷阱：body { overflow: hidden } 会直接切断滚动上下文；用 Flex 布局但父容器没设 height，sticky 也无效。
怎么写一个 iOS Safari 真正能用的吸顶容器
别依赖默认 body 滚动，亲手造一个可控的滚动上下文：
- 加一层全高包裹：
<div id="app" style="height: 100vh; overflow-y: scroll;"> <li>同时设 <code>body { overflow: hidden; }，避免双滚动条干扰 - 吸顶元素必须是这个
#app的直接子元素，或至少是它的最近可滚动祖先的子级 - 加
-webkit-sticky兼容旧 Safari：position: -webkit-sticky; position: sticky;
示例结构：
<div id="app" style="height: 100vh; overflow-y: scroll">
<header class="sticky-nav" style="position: -webkit-sticky; position: sticky; top: 0;">
导航栏
</header><main>大量内容</main>
</div>
吸顶后内容上蹿、抖动怎么防
抖动本质是文档流塌陷 + 浏览器重排错乱。sticky 元素吸顶后仍占位，但某些场景下父容器高度计算失准，导致下方内容“跳”：
- 吸顶元素自身别设
margin-bottom—— 它会让 sticky 区域计算偏移 - 父容器禁用
transform和filter，哪怕只是translateZ(0)也会切断 sticky 链路 - 如果吸顶区含图片，确保图片有宽高属性或用
aspect-ratio占位，防止加载时 layout shift - 响应式控制用
@media (max-width: 768px) { .sticky-nav { position: sticky; } }，绝不要切fixed—— 后者脱离文档流必然引发抖动
bottom 方向吸底为什么总失效
移动端 bottom 吸附比 top 更不可靠：bottom: 0 在 iOS Safari 15.4 之前基本不支持，安卓 WebView 也参差不齐。别硬写 bottom: 0，改用「反向 top」：
- 父容器设
max-height: 70vh; overflow-y: auto; - 吸底元素设
position: sticky; top: calc(100% - 52px);（52px是元素自身高度） - 配合
margin-top: auto或 Flex 布局更稳：.container { display: flex; flex-direction: column; height: 100vh; }+.sticky-bottom { margin-top: auto; }
真正需要滚动中吸底（比如聊天输入框），优先选 flex + margin-top: auto，兼容性零风险。
