最简方案是设position: fixed; bottom: 0; width: 100%; z-index: 1000;，需避免absolute、遗漏bottom、父容器overflow:hidden，并用padding-bottom预留内容空间。
用 position: fixed 实现底部悬浮条最简方案
直接加 position: fixed 就能实现“滚动时始终贴底”，不需要 JS 监听滚动。关键在于定位方式和层级控制。
常见错误是写成 position: absolute 或忘了设 bottom: 0 和 width: 100%，导致条不全宽、随内容滚动或被遮挡。
-
bottom: 0必须显式声明，仅靠top: auto不可靠 - 父容器加
overflow: hidden会截断 fixed 元素，要避免 - 务必设置
z-index（如z-index: 1000），否则可能被其他position: relative容器盖住 - 若页面有底部留白（如 footer 高度），需用
padding-bottom或margin-bottom给 body 留出空间，否则悬浮条会盖住 footer
移动端 Safari 滚动时底部条跳动怎么办
iOS Safari 在地址栏收起/展开时会触发视口高度变化，fixed 元素会短暂错位——这不是 bug，是视口重计算的正常表现。
根本解法不是监听 resize，而是用 viewport-fit=cover + env(safe-area-inset-bottom) 做适配：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
然后在悬浮条 CSS 中补安全区：
.bar { padding-bottom: env(safe-area-inset-bottom); }- 不加
viewport-fit=cover，env()变量会返回 0 - 只在 iOS 11.2+ 支持
env(safe-area-inset-bottom)，Android Chrome 忽略该值，无副作用 - 别用 JS 动态改
bottom值去“修复”跳动，会引入滚动卡顿和竞态问题
需要点击后才显示、且不占文档流时怎么处理
如果悬浮条默认隐藏、用户滚动一定距离后才出现，就不能只靠 CSS；但也不必监听每次 scroll——太耗性能。
- 用
IntersectionObserver监听页面底部元素是否进入视口，比scroll事件轻量得多 - 显示时用
opacity: 1; visibility: visible，隐藏时用opacity: 0; visibility: hidden，避免重排 - 绝对不要用
display: none切换，会导致浏览器反复销毁/重建渲染树，影响后续 fixed 定位精度 - 若需支持 IE，降级方案只能用
scroll+throttle（节流到 60ms 以上）
和 sticky footer 冲突时优先级怎么调
当页面同时存在 footer { position: sticky; bottom: 0; } 和悬浮条，两者都会争抢“底部位置”，结果通常是 footer 被顶高或悬浮条被压扁。
真正可靠的解法是放弃 sticky footer，改用 Flex 布局撑满高度：
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
footer { /* 正常静态定位 */ }-
sticky的“粘性”依赖父容器滚动，而fixed完全脱离文档流，二者逻辑冲突，硬调z-index只是掩盖问题 - Flex 方案下，悬浮条
fixed不影响文档流，footer 始终在内容末尾，互不干扰 - 如果必须保留 sticky footer（如 CMS 主题限制），那就把悬浮条的
bottom改为bottom: 60px（假设 footer 高 60px），并确保 footer 有明确高度
最易被忽略的是：fixed 元素的宽度计算基于视口，而非父容器。如果给它设了 max-width: 1200px 却没配 left: 50%; transform: translateX(-50%)，在窄屏下就会左右溢出。这个细节在响应式调试时经常漏掉。
