必须用 position: fixed，sticky 在滚动到底部后会失效，无法真正“悬浮”；fixed 脱离文档流、始终相对于视口定位，适合长期停留的入口，正确写法为 .footer-bar { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; }。
底部悬浮条的定位方式选 fixed 还是 sticky
必须用 position: fixed，sticky 在滚动到底部后会失效，无法真正“悬浮”。fixed 脱离文档流，始终相对于视口定位，适合长期停留的入口。
常见错误是误用 absolute（依赖父容器高度）或加了 top: 0（跑到了顶部）。正确写法是：
.footer-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
}
-
z-index必须足够高，避免被轮播图、弹窗等遮挡 - 别忘了设
width: 100%，否则在部分安卓 WebView 中可能只占内容宽度 - 如果页面有底部安全区（如 iPhone X+），需加
padding-bottom: env(safe-area-inset-bottom)
如何避免悬浮条挡住页面真实底部内容
很多页面底部有版权栏、返回顶部按钮等，直接贴底会导致遮挡。不能靠 JS 动态计算高度，太重且易出错。
推荐用 CSS 层叠控制：给真实底部容器留出空间，而不是让悬浮条“躲开”它。
- 在
或主容器末尾加一个透明占位<div class="footer-bar-spacer"></div> - 该 div 高度与悬浮条一致，CSS 设为
height: 60px（按实际条高） - 同时给它加
margin-top: -60px，避免额外撑开页面
这样既保持布局稳定，又不依赖 JS 监听 resize 或 scroll。
点击后跳转或展开的交互要防重复触发
移动端手指滑动时容易误触，尤其悬浮条紧贴屏幕边缘。直接绑定 click 事件会响应所有轻点，包括非意图操作。
- 改用
touchstart+touchend判断，排除滑动操作 - 加 300ms 内未移动的阈值（
deltaX/deltaY - 对按钮元素加
user-select: none和-webkit-tap-highlight-color: transparent
简单场景下，也可用 pointer-events: auto 配合 :active 样式反馈，但不要省略视觉按下态 —— 否则用户会反复点击。
兼容 iOS Safari 的滚动穿透和输入框聚焦问题
iOS Safari 在 fixed 元素上唤起软键盘时，常导致页面整体上移、悬浮条错位，甚至卡死。
- 避免在悬浮条内放
<input>或<textarea></textarea>，改用点击后跳转到独立页处理 - 若必须内嵌表单，监听
focusin事件，临时将body设为position: fixed; top: -${scrollTop}px - 滚动时禁用
overflow: hidden，否则键盘收起后页面回弹异常
这个坑在真机调试前很难暴露，务必在 iOS 实机上验证输入流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
