页脚元素无法使用 position: sticky 是因它位于文档流末端且父容器无滚动边界；需将其移入带 height 和 overflow 的容器中，并设 bottom 值才能生效。
sticky 元素为什么在页脚位置不生效
直接给页脚加 position: sticky 通常没反应，根本原因是 sticky 的生效依赖父容器有可滚动区域且自身不在文档流末端——而页脚天然位于 底部，滚动到底时它已“无处可粘”。真正能 sticky 的是“靠近底部但尚未到底”的元素，比如悬浮在内容区右下角的按钮。
正确写法：用 wrapper 包裹按钮并设高度限制
必须让 sticky 元素的父容器具备明确高度和 overflow，否则浏览器无法判断“粘住边界”。常见错误是把按钮直接塞进 <footer></footer> 或 ，结果它永远处于“滚动终点”，失去粘性。
- 把按钮放入一个带
height和overflow: auto的容器（如<main></main>或自定义<div class="content">）<li>按钮本身设 <code>position: sticky+bottom: 20px（注意不是top） - 确保该容器内有足够内容撑开高度，否则滚动条不出，sticky 不触发
<div class="content" style="height: 500px; overflow: auto;"> <!-- 大量内容 --> <button style="position: sticky; bottom: 20px; right: 20px; z-index: 10;">回到顶部</button> </div>
移动端 iOS Safari 的 sticky 兼容陷阱
iOS 15.4+ 虽支持 sticky，但若父容器用了 -webkit-overflow-scrolling: touch（老式惯性滚动），sticky 会失效；另外，Safari 对 bottom 值的计算有时不准确，尤其在键盘弹出后。
- 移除所有
-webkit-overflow-scrolling: touch - 改用
scroll-behavior: smooth配合原生滚动，更稳定 - 避免在
或上直接设overflow，优先控制局部容器 - 测试时真机打开 Safari 开发者工具，检查 computed styles 中
position是否仍为sticky
替代方案：当 sticky 真的不可靠时用 IntersectionObserver
如果页面结构复杂、嵌套深或需兼容旧版 Android WebView，sticky 行为可能错乱。这时用 IntersectionObserver 主动监听按钮是否接近视口底部，再手动切换 position: fixed 更可控。
const btn = document.querySelector('.floating-btn');
const observer = new IntersectionObserver(
([entry]) => {
btn.style.position = entry.isIntersecting ? 'fixed' : 'sticky';
},
{ threshold: 0.1, rootMargin: '0px 0px 100px 0px' }
);
observer.observe(document.querySelector('.content'));
注意 rootMargin 设为负的 bottom 值（如 '0px 0px -100px 0px'），才能提前触发“即将到达底部”的状态。
真正麻烦的不是写几行 CSS，而是搞清 sticky 的边界条件——它不是“固定在屏幕某处”，而是“在父容器滚动范围内，保持相对某个边缘的距离”。页脚按钮要悬停，就得先把它从页脚里“拎出来”，放进一个可滚动的上下文里。
