position: fixed 是实现悬浮球的唯一可靠方案，因其脱离文档流、始终相对于视口定位且滚动不变；需配 bottom/right 偏移、z-index≥9999、transform 过渡动画及 JS 控制展开状态。
悬浮球元素如何用 CSS 定位并保持固定在视口
悬浮球必须脱离文档流、始终相对于浏览器窗口定位，否则滚动时会消失或错位。position: fixed 是唯一可靠选择，配合 top/right 等偏移值控制位置。不要用 absolute 或 sticky——前者依赖父容器，后者受滚动容器限制，极易失效。
常见错误：把悬浮球放在某个 div 内部再设 fixed，结果发现它“飞”到了页面左上角——这是因为 fixed 的参照物是视口，与父级无关，写在哪不影响定位基准。
- 推荐初始位置：
bottom: 20px+right: 20px，避开底部导航和系统手势区 - 加
z-index: 9999，确保压过其他内容（尤其 SPA 中动态插入的弹层） - 务必设置
width和height，否则fixed元素可能因内容塌陷而不可见
展开动画用 CSS transition 还是 transform？
直接改 width/height 或 display 会触发重排，卡顿明显；用 transform: scale() + opacity 是最轻量、最兼容的方案。展开不是“变大”，而是“从缩略态过渡到完整态”。
典型错误：用 max-height 做展开动画——初始设 max-height: 0，展开时设成具体像素值。这看似聪明，但高度变化仍会触发布局计算，且无法精确控制动画曲线，iOS Safari 上还容易闪动。
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 缩略态：
transform: scale(0.8); opacity: 0.7; - 展开态：
transform: scale(1); opacity: 1; - 统一加
transition: transform 0.25s ease, opacity 0.25s ease; - 避免在
:hover上直接写动画——移动端无 hover，必须靠 JS 切换 class
点击展开逻辑为什么不能只靠 CSS :active 或 :hover
:active 只在鼠标按下瞬间生效，松开就恢复；:hover 在触摸设备上基本不可用。真实场景需要“点一下展开、再点一下收起”的状态切换，必须由 JS 控制 class。
关键点在于状态同步：按钮和广告内容要共用同一个开关状态，否则容易出现“点了没反应”或“关不掉”。不要用两个独立的 click 监听器分别控制球和面板。
- 给悬浮球容器加一个
data-expanded="false"属性 - JS 里统一监听球的
click，切换属性值，并用 CSS 选中器匹配：[data-expanded="true"] .ad-panel { transform: scale(1); } - 点击面板外部区域时，也要主动设回
false——否则用户点空白处关不掉
广告内容加载延迟导致展开后空白怎么办
悬浮球本身可立即渲染，但广告素材（图片、iframe、第三方 JS）往往异步加载。如果展开时内容还没 ready，用户看到的就是一个空盒子或 loading 框，体验极差。
不能等用户点开才开始加载广告资源——那样必然有延迟。必须提前初始化，但又不能影响首屏性能。
- 在页面 DOM 加载完成后（
DOMContentLoaded），用new Image().src = "..."预加载主图 - 第三方广告脚本用
async+defer，并包裹在setTimeout(..., 1000)里，避开关键渲染路径 - 展开前检查
.ad-panel img.complete或iframe.onload，未完成则显示 skeleton 占位，不强行展开
最常被忽略的是 iframe 广告的跨域加载状态监听——iframe.contentDocument 在跨域时不可读，得靠广告平台提供的回调函数（如 window.adReady）来确认就绪，否则永远等不到“加载完成”。
