底部固定悬浮条应使用 position: fixed 并设置 bottom: 0、left: 0、right: 0 和 z-index；内容与高度变化靠 JS 控制 class 或 textContent，CSS 仅负责 transition；优先用 transform 替代 top/bottom 实现平滑动画；需兼容 iOS 键盘弹出和安全区。
底部固定悬浮条用 position: fixed 最直接
要让条始终贴在视口底部，不随滚动消失，position: fixed 是唯一可靠方案。绝对定位（position: absolute）依赖父容器，滚动时容易错位；粘性定位（position: sticky）在底部触发条件难控制，且兼容性差（尤其 iOS Safari 对 bottom 支持不一致）。
关键样式必须包含：bottom: 0、left: 0、right: 0，并设 z-index 避免被遮挡。宽度用 left/right 而非 width: 100%，能自动避开 margin 或 padding 影响。
动态变化靠监听 DOM 或状态更新，不是靠 CSS 动画本身
悬浮条内容变（比如购物车数量、通知红点）、高度变、显隐切换，本质是 JS 控制元素属性或类名，CSS 只负责过渡效果。常见错误是试图用 @keyframes 驱动内容变更——动画不能改 textContent 或增删子节点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
classList.toggle()切换hidden或expanded类，配合transition: height 0.2s ease, opacity 0.15s ease - 数量变化时，只更新
textContent，避免重绘整个 DOM 结构 - 高度自适应场景下，不要对
height做auto过渡（无效），改用max-height+overflow: hidden模拟 - 若依赖外部状态（如 React/Vue），确保响应式更新触发的是真实 DOM 属性变更，而非仅虚拟 DOM diff
transform: translateY() 比 top/bottom 更适合平滑位移
当悬浮条需要“上推展开”或“侧滑入场”，用 bottom 动画会触发浏览器重排（reflow），卡顿明显；而 transform 由 GPU 加速，性能好得多。
示例结构：
<div id="footer-bar" class="bar--collapsed"> <span class="badge">3</span> </div>
对应 CSS：
.bar--collapsed {
transform: translateY(100%);
}
.bar--expanded {
transform: translateY(0);
}
#footer-bar {
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
注意：cubic-bezier 曲线比 ease 更可控，避免生硬启停；transform 不影响文档流，不会挤压上方内容。
移动端需额外处理键盘弹出和安全区（iOS Safe Area）
iOS 键盘弹出会把 fixed 元素顶上去，导致悬浮条悬空；同时 iPhone X+ 的底部安全区会让条被截断。这两个问题纯 CSS 无法根治。
应对方式：
- 监听
focusin事件，检测输入框获得焦点时，临时给#footer-bar加display: none；失焦后恢复 - 用
env(safe-area-inset-bottom)补齐内边距：padding-bottom: env(safe-area-inset-bottom)，但仅当条本身有背景色、需撑开安全区时才加 - 避免在
resize事件里频繁读取window.innerHeight——触发太密，改用visualViewportAPI（Chrome/Edge 支持，iOS Safari 仍弱）
最麻烦的其实是微信内置浏览器：它既不支持 visualViewport，又会在键盘收起后残留错误的视口高度，这时候只能靠定时器 + scrollY 变化来间接判断是否已恢复。
