用 position: fixed 实现底部通栏悬浮条需设 bottom: 0、width: 100%、z-index ≥ 100，且必须为 body 直系子元素以避免父容器 overflow 或 transform 干扰定位上下文。
用 position: fixed 实现底部通栏悬浮条
直接加 position: fixed + bottom: 0 就能实现，但必须注意父容器干扰和滚动内容遮挡问题。很多页面加了样式没生效，其实是被外层 overflow: hidden 或 transform 搞定了定位上下文。
-
position: fixed的参照物是视口（viewport），不是父元素，所以它天然脱离文档流 - 必须显式设置
width: 100%，否则默认只撑开内容宽度 - 要避免被其他元素盖住，
z-index至少设为100起步（尤其有轮播图、弹窗时） - 如果页面主体用了
transform: translateZ(0)或will-change: transform，会创建新的层叠上下文，导致fixed元素相对这个新上下文定位——这时它就“固定不住”了
HTML 结构要扁平，别套多层 wrapper
常见错误是把底部条包在 <div class="container"> 或 <code><main></main> 里，结果它跟着容器一起滚动。底部悬浮条必须是 的直系子元素，或至少不被 position: relative/absolute 的祖先干扰。
- 推荐写法：
<header>...</header><main>...</main><div class="footer-bar">...</div> - 绝对不要：
<main><div class="footer-bar">...</div></main>（会被main的overflow截断） - 如果 CMS 或框架强制套壳，可用 JS 把节点
document.body.appendChild()动态移出
兼容移动端需处理 viewport 和缩放
在 iOS Safari 和部分安卓浏览器上，地址栏收起/展开会触发视口高度变化，fixed 元素可能短暂错位或卡在半空。这不是 bug，是浏览器对「视觉视口」和「布局视口」的分离处理。
- 确保
<meta name="viewport">包含height=device-height无用，真正有效的是：width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no - 避免用
vh单位设高度（比如height: 8vh），iOS 下视口变化时会跳变；改用px或rem - 如果条内有点击区域，加
touch-action: manipulation防止 300ms 延迟
滚动时隐藏/显示需要监听 scroll 事件
纯 CSS 无法判断用户是否在滚动，所以“滑动时隐藏、静止时显示”这类交互必须靠 JS。但别用 onscroll 直接绑函数，容易卡顿。
- 用
requestAnimationFrame节流：只在下一帧执行位置判断，避免高频触发 - 检测滚动方向比单纯看
scrollTop变化更可靠，存上一次值做差值比较 - 静止判定不能只靠
setTimeout，要结合scrollend事件（Chrome 120+ 支持，旧版 fallback 用setTimeout+ 清除逻辑） - 示例关键逻辑：
let lastScrollTop = 0; window.addEventListener('scroll', () => { const st = window.scrollY; if (st > lastScrollTop && st > 100) { bar.classList.add('hidden'); } else if (st
