最稳妥的网页右侧跟随广告实现方式是position: fixed，因其直接锚定视口、行为确定、兼容性好（IE9+），而sticky依赖滚动上下文、易受overflow:hidden等影响且会随父容器滚动进出，不符合广告持续曝光需求。
网页右侧跟随广告最稳妥的实现方式是 position: fixed，不是 sticky，也不是 JS 监听 scroll——后者在 iOS Safari 和部分安卓 WebView 中容易错位、抖动或失效。
为什么用 fixed 而不是 sticky
position: sticky 依赖父容器滚动上下文，一旦父级设了 overflow: hidden、transform 或 contain，吸附就会失效；广告通常需始终可见且不随内容“进进出出”，sticky 在滚动超出父容器后会回归文档流，完全不符合广告持续曝光的需求。而 fixed 直接脱离文档流、锚定视口，行为确定、兼容性好（IE9+ 支持）。
fixed 广告的基本写法与避坑点
核心 CSS 只需三行，但位置、层级和遮挡问题必须手动处理：
- 给广告容器加
position: fixed、right: 20px、top: 100px（数值按需调整） - 必须设
z-index（建议 ≥ 100），否则可能被轮播图、弹窗或第三方 SDK 的z-index覆盖 - 若页面有
position: fixed导航栏，广告别紧贴顶部——留出至少 60px 空隙，避免被遮挡又难点击 - 移动端需额外加
max-width: 80vw和width: fit-content，防止广告过宽撑破小屏
滚动时避免遮挡正文内容
固定广告常把正文右侧内容“挤走”或造成横向滚动条，根源是它仍参与文档流宽度计算（尽管视觉上脱离）。解决方法只有两个：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 给
body加padding-right（值 = 广告宽度 + 间距），确保正文不被覆盖也不触发横向滚动 - 更推荐：广告容器用
pointer-events: none，内部可点击区域（如<a></a>）单独设pointer-events: auto，这样既不影响正文选中/滚动，又保留广告点击热区
移动端适配的关键细节
iOS Safari 对 fixed 元素在地址栏收放时有重绘 bug：地址栏隐藏→视口高度变大→广告突然下移；地址栏展开→视口缩小→广告被截断。这不是代码问题，而是浏览器行为：
- 不要监听
window.scrollY或resize动态重设top——iOS 下这些事件延迟高、触发不准 - 改用
vh单位定位，例如top: calc(10vh + 40px)，比像素值更能适应视口变化 - 广告高度不宜超过视口 30%（
max-height: 30vh），否则小屏上会遮住大量正文，影响跳出率
真正难的不是让广告“跟住”，而是让它不干扰用户阅读、不破坏滚动节奏、不在不同设备上突然消失或错位——这些细节没在 CSS 里写死，就得靠真实机型反复测。
