position: sticky在底部收缩栏中不可用，因其依赖父容器可滚动且高度溢出视口，而收缩栏需始终存在、随时可点；Chrome仅实验性支持bottom:0，Safari及多数WebView完全忽略，导致加载不可见、短页不触发或收缩后无法展开。
底部悬浮收缩栏不能靠 position: sticky 实现，必须用 position: fixed + 显式 bottom: 0 + JS 控制显隐状态，否则收缩/展开逻辑会失效或错位。
为什么 position: sticky 在底部收缩栏里根本不可用
浏览器对 position: sticky; bottom: 0 的支持极差：Chrome 仅在实验标志开启时部分生效，Safari 和大多数 WebView 完全忽略。它依赖父容器可滚动且高度溢出视口，而广告栏需要“始终存在、随时可点”，不是“滚动到某位置才出现”。强行用 sticky，结果往往是页面加载时不可见、短内容页完全不触发、或收缩后无法再展开。
常见错误写法：position: sticky; bottom: 0; —— 这行 CSS 在绝大多数真实设备上等于没写。
fixed 底部栏的 HTML 结构和基础样式怎么写才不踩坑
结构必须独立于语义容器（如 或 ），直接放在 末尾：
<div id="ad-bar" role="region" aria-label="广告推广栏"> <div class="bar-content">...广告内容...</div> <button id="ad-toggle" aria-expanded="true"></button> </div>
关键样式缺一不可：
-
position: fixed+bottom: 0+left: 0+right: 0—— 漏任意一个，iOS 或安卓 WebView 就可能右侧留白、高度塌陷或横屏错位 -
z-index: 1050—— 太低会被弹窗、广告 SDK 覆盖；太高（如 999999）易与第三方组件冲突 -
height: 60px（固定值）—— 别用vh或rem，软键盘弹出时单位会跳变 -
padding-bottom: calc(60px + env(safe-area-inset-bottom))加在上，适配 iPhone 底部安全区
收缩/展开状态如何持久化且不干扰用户操作
收缩不是单纯 display: none，而是要保留占位、维持可访问性、并记住用户选择：
- 用
classList.toggle('collapsed')切换状态类，配合max-height和overflow: hidden做平滑过渡，避免 DOM 移除导致焦点丢失 - 状态存
localStorage，键名用带域名前缀的字符串（如ad-bar-collapsed-example.com），防止多站点冲突 -
aria-expanded必须同步更新，否则屏幕阅读器无法感知状态变化 - 关闭按钮点击后，需调用
button.focus()，确保键盘用户能继续操作其他元素 - 禁止在
click中直接event.preventDefault()，除非你明确替换了默认行为（比如用button替代a）
移动端键盘弹出时收缩栏错位，JS 怎么补救
iOS Safari 和部分安卓浏览器在软键盘弹出时会缩放视口，fixed 元素常卡在半空。不能靠禁用缩放解决，得动态修正：
监听 visualViewport?.resize（iOS 15+），降级到 window.resize，并节流：
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
const barHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--ad-height')) || 60;
document.body.style.paddingBottom = `calc(${barHeight}px + env(safe-area-inset-bottom, 0px))`;
}, 100);
});
注意：别用 orientationchange，它不响应键盘场景；也别在每次 resize 都重设 style，必须节流，否则滚动/输入时卡顿明显。
真正难处理的是“收缩状态下键盘弹出”——此时栏已隐藏，但 padding-bottom 还在撑空间。解决方案是：状态变更时同步更新 body 的 padding 计算逻辑，而不是只靠初始值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
