必须用position: fixed且bottom: 0实现底部固定悬浮条；left: 0与right: 0需同时设置以铺满视口；z-index应≥1000避免遮挡；禁用transform干扰，iOS需适配safe-area-inset-bottom并防touchstart导致的闪动。
底部固定悬浮条怎么用 CSS 定位实现
必须用 position: fixed，且 bottom: 0 是硬性要求，否则无法真正贴底。注意不要和 position: sticky 混用——后者依赖父容器滚动，不满足“始终可见”的需求。
常见错误是加了 transform: translateY(...) 或动画后，元素脱离文档流但未重设 z-index，导致被其他 fixed 元素（如导航栏）遮挡。建议统一设 z-index: 1000 以上。
-
left: 0和right: 0必须同时写，确保宽度铺满视口 - 避免给父容器设
overflow: hidden，会裁掉 fixed 元素 - 在 iOS Safari 中，若页面有
-webkit-overflow-scrolling: touch，可能触发渲染异常，需测试是否闪动
滑动渐显怎么用 scroll 事件控制显示状态
核心逻辑是监听 window.onscroll，根据 window.scrollY 判断是否已向下滚动一定距离（比如 100px），再切换类名触发动画。不能直接用 scrollY === 0 做开关，因为首屏可能有轮播图或 banner，用户还没动就该隐藏。
性能关键点：必须节流。不用 requestAnimationFrame 或 setTimeout 包裹，频繁触发会导致卡顿，尤其低端安卓机。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
let ticking = false+requestAnimationFrame实现轻量节流 - 判断条件建议用
scrollY > 80而非=== 0，避开首屏微小抖动误判 - 切换类名比直接改
style.opacity更可控，方便用 CSS 过渡
transition 动画为什么只生效一次
因为 CSS transition 只在属性值“变化时”触发，而初始状态如果已经是 opacity: 0 且 visibility: hidden，后续 JS 切换类名时若没有“先移除再添加”，浏览器可能跳过重绘。
典型错误写法：el.classList.add('show') 后没确保之前已移除 show；或者用了 display: none，它不支持过渡，必须用 opacity + visibility 组合。
- 正确结构：
.bar { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s step-end; } -
step-end确保visibility在过渡末尾才切换，避免闪现 - JS 中用
el.classList.toggle('show', shouldShow)替代 add/remove，更安全
移动端 touchstart 事件干扰滚动判断怎么办
在 iOS 和部分安卓 WebView 中，touchstart 会短暂中断 scroll 事件流，导致“刚滑动就闪一下”或“松手后延迟显示”。这不是 bug，是浏览器为优化触摸响应做的权衡。
绕过方式不是禁用 touch 事件，而是把判断逻辑从“是否在滚动”改为“是否已离开顶部”，并加一个 50ms 的防抖兜底。
- 监听
touchend和scroll两个事件，任一触发都更新最后活跃时间 - 用
Date.now() - lastActiveTime 判断是否“刚结束交互”，此时强制检查 <code>scrollY - 避免在
touchmove中做 DOM 操作，极易卡顿
最易忽略的是 viewport 缩放兼容性：当用户双指缩放页面后，scrollY 值不变，但视觉位置偏移，fixed 元素可能错位。目前无完美解法，建议在 resize 和 orientationchange 时重置状态，并提示用户“请勿缩放页面”。
