用 position: fixed 实现侧边栏悬浮广告最直接，兼容IE7+且不依赖JS；应垂直居中、设z-index、限制宽度、移动端用媒体查询隐藏，并避开广告屏蔽关键词。
用 position: fixed 实现侧边栏悬浮广告最直接
浏览器原生支持，不依赖 JS，兼容性好（IE7+），且不会随页面滚动而消失。关键是要避开移动端误触、避免遮挡内容、防止被广告屏蔽插件拦截。
常见错误是直接写 position: fixed; top: 0; right: 0; —— 这会让广告贴顶右上角，挡住导航或关闭按钮；更糟的是在小屏上直接盖住整个右半屏。
- 推荐定位：用
right: 20px;+top: 50%;+transform: translateY(-50%);垂直居中，留出操作空间 - 必须加
z-index: 1000;（但别设太高，比如 9999，否则可能压住弹窗或下拉菜单） - 给容器设
max-width: 300px;和width: 100%;保证在窄屏下可读，不溢出 - 务必加
pointer-events: auto;（默认就是 auto，但某些重置样式会设成 none，导致点不了）
如何让广告在移动端自动隐藏
侧边悬浮广告在手机上基本没意义：屏幕窄、易误点、影响阅读。硬塞只会提高跳出率，还可能被 Chrome 标记为“侵入式广告”而降权。
用媒体查询是最稳妥的方案，比 JS 判断设备类型更可靠、更轻量。
- 在 CSS 中加：
@media (max-width: 768px) { .sidebar-ad { display: none; } } - 不要用
visibility: hidden或opacity: 0—— 广告脚本仍会加载、计费，浪费资源 - 如果必须保留（比如内嵌了监测像素），可用
height: 0; overflow: hidden; padding: 0; border: none;彻底收起
避免被 uBlock Origin 等插件拦截的关键写法
主流广告屏蔽规则（如 EasyList）会匹配含 ad、banner、sidebar 等词的 class 或 id。名字起得越像广告，越容易被干掉。
- 类名避开敏感词：用
aside-promo比sidebar-ad更安全；spotlight-unit比ad-banner更隐蔽 - 不要在 HTML 中写
data-ad、data-ad-slot这类属性（AdSense 专用，会被直接匹配） - 广告内容如果是 iframe，确保 src 域名不在过滤列表里；若用 JS 动态插入，函数名别叫
loadAd、renderBanner - 静态图片广告建议用
srcset，而不是直接
为什么不用 JavaScript 控制悬浮位置
有人用 window.addEventListener('scroll', ...) 动态改 top 值来“模拟” fixed 效果，这纯属自找麻烦。
- 性能差：滚动时高频触发，尤其在低端安卓机上明显卡顿
- 逻辑复杂：要监听 resize、orientationchange、甚至 iframe 加载完成，才能对齐
- 失效风险高：如果页面用了
overflow: hidden在 body 上，fixed元素可能被裁剪，而 JS 方案根本发现不了 - SEO 友好性低：搜索引擎可能忽略 JS 插入的广告内容，影响投放结算
真正需要 JS 的场景只有两个：按用户行为（如停留 30 秒）才显示、或根据 Cookie / UA 动态决定是否加载。其余时候，CSS fixed 是唯一合理选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
