sticky元素到底部消失是因bottom未对齐容器滚动边界：需父容器设明确高度+overflow-y:auto，bottom值应等于元素高度而非0，ios safari旧版存在兼容性问题。
sticky 元素到底部就消失，是因为 bottom 值没对齐容器滚动边界
直接写 position: sticky; bottom: 0; 后元素一滚到容器底就“掉下去”，不是 bug，是 sticky 的锚点计算逻辑在起作用：它只在元素**底部即将离开滚动容器可视区域下边界时**才触发固定；一旦整个元素都滑出该容器的可滚动范围，sticky 就自动退回到 normal 流中——看起来就像“消失了”。关键不是元素坏了，而是你设的 bottom 没和容器的滚动终点对齐。
必须显式约束父容器高度并设置 overflow-y: auto
sticky 的滚动上下文必须来自一个**有明确高度 + 可滚动**的父容器。如果父级是 height: auto 或没设 overflow，浏览器找不到“底部在哪”，bottom 偏移根本不会被解析。
- 父容器必须设
height或max-height（比如max-height: 70vh），不能依赖内容撑高 - 必须加
overflow-y: auto（scroll也行，但会强制显示滚动条） - 避免
overflow: hidden、overflow: clip，它们会直接禁用 sticky 锚点计算 - 若用 Flex/Grid 布局，需确保主轴方向有滚动能力（如
flex-direction: column+overflow-y: auto）
bottom 值要等于元素自身高度，而不是写 0
写 bottom: 0 是想让它“贴底”，但 sticky 的 bottom 是指“元素底边距离其滚动容器底边的距离”。当容器高度刚好卡住元素时，bottom: 0 实际会让元素在最后一帧被判定为“已完全滚出”，立刻解除粘性。真正稳定的做法是让元素在滚动结束前就“卡住”：
- 测量元素高度（比如 48px），设
bottom: 48px - 或用
bottom: calc(100% - 48px)，前提是父容器高度确定且子元素不参与高度计算 - 更稳妥的是配合
margin-top: auto+ Flex 布局推到容器末尾，再用position: sticky; top: 100%;+transform: translateY(-100%)模拟底部吸附
iOS Safari 下 bottom: 0 几乎必然失效
即使结构全对，iOS Safari 15.3 及更早版本会直接忽略 bottom 声明，把 sticky 当成 relative 处理。这不是配置问题，是引擎限制。
- 检查 UA，对
iOS Safari 强制降级为 <code>position: fixed+bottom: 0 - 避免在父容器上用
transform、backface-visibility: hidden、-webkit-overflow-scrolling: touch - 微信 WebView、部分安卓定制浏览器也会静默退化 sticky，建议用
IntersectionObserver监听getBoundingClientRect().bottom 手动切换 class
实际能跑通的最小可靠结构，往往不是靠调 bottom 值，而是放弃“滚动中吸底”，改用 Flex 布局做“结构式吸底”——因为绝大多数所谓“sticky 到底消失”，本质是误把页面结构锚定需求，当成滚动行为需求来解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
