用fixed最稳妥：bottom:0+left:0+width:100%确保贴底全宽，z-index防遮挡；sticky因依赖父容器高度和滚动流，在底部锚定场景易失效。
底部悬浮条用 fixed 还是 sticky
直接用 position: fixed 是最稳妥的选择。虽然 position: sticky 看起来语义更合适，但它依赖父容器高度和滚动流，在底部锚定场景下容易失效——比如父元素没设置 height 或内容不足时，sticky 根本不触发。
实操建议：
-
fixed配合bottom: 0和left: 0，再加width: 100%，能确保始终贴底且横跨全宽 - 务必给悬浮条设置
z-index（如z-index: 1000），否则可能被其他绝对定位元素遮挡 - 若页面有 footer 且希望悬浮条在 footer 上方而非覆盖它，那就不能用
fixed，得改用absolute+ JS 监听滚动动态计算位置——但这是少数情况，绝大多数需求用fixed就够了
动画入场用 transform 还是 top/bottom
用 transform: translateY() 实现滑入动画，别碰 bottom 或 top。后者会触发 layout，动画卡顿明显，尤其在低端安卓 WebView 中。
常见错误现象：动画开始前条突然闪一下、中途掉帧、iOS 上偶尔白屏。
实操建议：
- 初始状态设为
transform: translateY(100%)（完全移出视口下方） - 触发动画时改为
transform: translateY(0)，配合transition: transform 0.3s ease-out - 如果需要延迟出现（比如用户滚动 200px 后才显示），用 JS 监听
scroll，通过classList.add('show')控制 class，避免内联 style 操作
如何让悬浮条在移动端不遮挡输入框
iOS Safari 的软键盘弹出会把 fixed 元素顶上去，导致悬浮条悬在半空甚至盖住输入框。这不是 bug，是浏览器对 viewport 缩放的响应行为。
实操建议：
- 监听
focus事件，在 input 或 textarea 获焦时临时隐藏悬浮条：element.style.display = 'none' - 监听
blur后延时 300ms 再恢复显示（防止快速切换焦点导致闪烁） - 更健壮的做法是监听
resize事件，检测window.innerHeight是否显著变小（比如比初始值小 200px 以上），自动隐藏；但要注意 Android 和 iOS 触发时机差异大，简单场景用 focus/blur 更可靠
点击关闭后如何保持状态不重复出现
用户点 × 关闭后，下次刷新页面又弹出来，体验极差。必须持久化“已关闭”状态，但不能只靠 localStorage 简单存个布尔值——要考虑过期、多设备同步、隐私模式兼容等。
实操建议：
- 关闭时存
localStorage.setItem('footerBarClosed', Date.now().toString())，而不是true - 每次初始化检查：
const closedAt = localStorage.getItem('footerBarClosed');，如果存在且距今 - 不要用
sessionStorage，关掉标签页就丢了；也别用 Cookie，增加请求头体积且服务端无感知 - 如果站点已接入用户登录态，更推荐把关闭状态存在后端，避免本地存储被清除后重置
真正难的不是写动画，而是处理软键盘顶起、本地状态过期、多端一致性这些边缘case——它们往往在上线后第二天才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
