底部悬浮条必须用 position: fixed 并设置 bottom: 0、left: 0、width: 100%；显隐须用 display 切换而非 visibility，推荐 class 控制；移动端需处理 fixed 错位及键盘干扰。
用 position: fixed 实现底部悬浮条的基本结构
底部固定悬浮条本质是脱离文档流、始终贴在视口底部的元素。必须用 position: fixed，不能用 absolute 或 sticky（sticky 在滚动到底部时会失效）。常见错误是忘记设置 bottom: 0 和 left: 0（否则可能偏移或不铺满），同时要加 width: 100%，否则宽度只按内容撑开。
示例结构：
<div id="footer-bar" style="position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: #333; z-index: 1000;"> <button onclick="toggleBar()">切换</button> </div>
用 display 或 visibility 控制显隐？选哪个
二者行为完全不同：display: none 完全移出渲染树，不占空间、不响应事件；visibility: hidden 仍占布局空间，只是不可见——这对底部悬浮条是灾难性的：它会让页面底部“空出一块”，用户滚动时看到空白，且点击不到下方内容。
所以必须用 display 切换，但要注意副作用：
立即学习“前端免费学习笔记（深入）”；
- 如果悬浮条上有
transition动画，display无法过渡，得改用opacity+pointer-events配合 - 若需平滑收起效果（比如高度收缩），得用
max-height+overflow: hidden+transition，不能直接动height（因为height: 0与auto无法过渡）
JavaScript 控制显隐的可靠写法
直接操作 style.display 简单但易被内联样式覆盖；推荐用 class 切换，更可控、可复用：
.bar-hidden { display: none; }
.bar-visible { display: block; }
JS 只需：
function toggleBar() {
const bar = document.getElementById('footer-bar');
bar.classList.toggle('bar-hidden');
}
注意点：
- 不要用
bar.style.display = 'none'后再想用 CSS 类恢复——内联样式优先级高于 class，得手动清空bar.style.display = '' - 如果页面有多个状态（如“自动隐藏/常驻/禁用”），别堆
if-else切display，用 data 属性 + 单一 class 控制更清晰，例如：data-state="auto"配合 CSS :not([data-state="show"]) .bar { display: none; }
移动端适配和滚动穿透问题
在 iOS Safari 或部分安卓 WebView 中，fixed 元素在键盘弹出、地址栏收放时可能错位或卡住。这不是 JS 显隐的问题，而是浏览器渲染缺陷。临时缓解方式：
- 监听
resize事件，延迟 100ms 强制重设bottom（bar.style.bottom = '0'） - 避免在悬浮条内放
input或textarea——它们会触发软键盘，加剧 fixed 错位 - 如果悬浮条遮挡了底部按钮，且用户必须频繁操作，考虑改用
position: sticky+ 包裹容器控制高度，虽然不是“真正固定”，但体验更稳定
真正的难点不在显隐逻辑，而在各种浏览器对 fixed 的实现差异——尤其是 hybrid App 内嵌 WebView 场景，往往要加 UA 判断和降级方案。
