position: sticky 是实现广告随滚动吸附最轻量、语义清晰且无需 JS 的方案，需设 top 值（如 top: 0）并确保父容器无 overflow: hidden 或 transform 等截断粘性上下文的样式。
用 position: sticky 实现广告随滚动吸附
最轻量、语义清晰、无需 JS 就能实现“广告随滚动条上下滑动”的效果，position: sticky 是首选。它不是固定在视口某处（fixed），而是像“粘”在滚动流中某个位置——比如页面滚动到广告容器顶部时开始吸附，继续向下滚时它跟着动，直到被父容器边界截停。
关键前提：父容器不能有 overflow: hidden 或 transform 等会截断粘性定位上下文的样式；且必须指定 top 值（如 top: 20px）才能生效。
-
top值决定吸附起点：设为top: 0表示一进入视口就吸附顶部；设为top: 80px则等容器上边缘距视口顶部 80px 时才触发 - 若广告需始终可见但又不遮挡内容，建议配合
z-index: 1000和background: white防文字穿透 - 移动端 Safari 对
sticky支持良好，但 iOS 15.4 之前版本在overflow-scrolling: touch容器内可能失效——此时应改用position: fixed+ JS 动态计算位置
用 position: fixed + JS 跟踪滚动位置
当需要广告在整页任意位置“悬浮跟随”，或要避开某些区域（如导航栏、页脚）时，position: fixed 更可控。但单纯写 fixed 会让广告脱离文档流、无法响应内容高度变化，所以得靠 JS 监听 scroll 并动态更新 top 值。
核心逻辑是：获取广告 DOM 元素的 getBoundingClientRect().top，结合窗口 scrollY，算出它本该在文档中的“理想 top 值”，再映射为视口坐标。
立即学习“前端免费学习笔记（深入）”；
- 别直接监听
window.onscroll——节流不及时会导致抖动；改用requestAnimationFrame包裹更新逻辑 - 避免频繁读取
scrollTop或offsetTop，它们会强制同步 layout；优先用getBoundingClientRect()缓存结果 - 若广告下方有“回到顶部”按钮之类交互元素，注意
fixed元素会盖住它，需手动加margin-bottom或调整 z-index 层级
为什么不要用 transform + translateY 模拟滚动跟随
有人尝试用 CSS 动画或 JS 不断修改 transform: translateY() 来模拟“随滚动动”，这在技术上可行，但实际踩坑极多：
- 动画帧率受页面后台标签页节流影响，切走再切回常卡顿或跳变
-
transform不触发重排，但会创建新层叠上下文，导致z-index失效、阴影裁剪、overflow: hidden异常 - 无法自然响应浏览器原生滚动边界（如滚动到页尾自动停止），必须手动判断
scrollHeight - clientHeight - scrollTop 等条件，代码冗长易错 - 无障碍支持差：屏幕阅读器无法感知这种“视觉位移”，可能跳过广告内容
广告容器高度变化时的常见断裂点
很多广告位嵌在 CMS 或动态加载区块里，JS 插入广告后容器高度突变，sticky 或 fixed 定位会瞬间错位甚至消失——这不是 bug，是浏览器渲染机制使然。
解决办法不是重写定位逻辑，而是让容器“提前预留空间”：
- 给广告外层加
min-height: 120px（按广告典型高度预估），内容加载后再用 JS 移除 - 若广告由第三方脚本异步注入（如 Google AdSense），监听其
load事件后调用container.offsetHeight强制重排，再触发一次定位重计算 - 绝对不要依赖
visibility: hidden或opacity: 0隐藏广告占位——它们不占布局空间，sticky会直接失效
真正容易被忽略的是：广告是否真的“可被滚动影响”。哪怕样式全对，只要父容器用了 display: contents 或被 transform 包裹，sticky 就不会工作——先在 DevTools 里临时删掉这些父级样式，确认广告能动了，再一层层加回去排查。
