侧栏吸顶需优先用 position: sticky 配合 top 值实现原生吸顶，父容器禁用 overflow: hidden 或 transform；不支持时降级为 fixed 并添加占位元素防内容上跳，同时处理窄屏错位、iOS 地址栏变化及广告延迟加载问题。
侧栏吸顶广告不能只靠 position: fixed 硬套，否则会脱离文档流、遮挡内容、在窄屏下错位，甚至被 iOS Safari 的地址栏遮住。核心解法是「滚动时动态切换定位模式」，用 position: sticky 为主，position: fixed 为兜底。
用 position: sticky 实现原生吸顶
这是最轻量、语义最清晰的方式，浏览器原生支持滚动吸顶逻辑，无需监听 scroll 事件。
-
sticky必须配合top（或bottom）值才生效，例如top: 20px表示距离视口顶部 20px 时开始吸顶 - 父容器不能有
overflow: hidden或transform，否则会截断吸顶行为（常见于轮播图、卡片容器） - 必须确保侧栏元素在 DOM 中处于正常文档流位置——不能是
float或absolute，否则sticky失效 - 兼容性：Chrome 56+、Firefox 59+、Safari 15.4+、Edge 79+；iOS Safari 15.4+ 才真正稳定，旧版需降级处理
<aside class="sidebar-ad">
<div class="ad-content">广告内容</div>
</aside>
<p><style>
.sidebar-ad {
position: sticky;
top: 20px; /<em> 吸顶触发阈值 </em>/
max-width: 300px;
}
.ad-content {
padding: 12px;
background: #fff;
border: 1px solid #e0e0e0;
}
</style>当 position: sticky 不可用时，手动 fallback 到 fixed
比如要兼容 iOS Safari 15.3 及更早版本，或父容器用了 transform: scale(1) 这类“定位上下文破坏者”时，sticky 会静默失效。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 先用 JavaScript 检测是否支持
sticky：CSS.supports('position', 'sticky') - 监听
scroll，计算侧栏元素的getBoundingClientRect().top，当它 ≤ 触发阈值（如 20）时，切换为position: fixed并设置top和left/right - 必须同步记录原始位置（
offsetTop+offsetLeft），滚动回顶部时还原为static或relative，否则会“卡死”在固定位置 - 注意：
fixed元素脱离文档流，会导致下方内容上移，建议给侧栏预留一个占位<div class="ad-placeholder"></div>，高度与广告一致
侧栏吸顶必须处理的三个真实问题
很多实现只顾“能吸顶”，却在实际项目中翻车：
立即学习“前端免费学习笔记（深入）”；
-
窄屏错位：侧栏设了
right: 20px，但页面有横向滚动时，fixed元素会相对于视口右边缘固定，导致在大内容区域右侧“飘走”。应改用left: calc(100vw - 320px)或 JS 动态算出容器右边界 -
iOS 地址栏干扰：Safari 滚动时地址栏收起/展开，会触发视口高度变化，
fixed元素位置跳变。解决办法是监听resize，并在setTimeout延迟 100ms 后重置位置（避免抖动） -
广告加载延迟导致吸顶错位：图片或 iframe 广告异步加载，撑开侧栏高度后，
sticky的触发点偏移。应在广告load后调用element.dispatchEvent(new Event('resize'))或手动触发重计算
真正稳定的侧栏吸顶，不是选一个 CSS 属性完事，而是得判断浏览器能力、包裹容器约束、广告加载节奏和移动端视口变化这四层变量。最容易被忽略的是：不加占位元素的 fixed fallback，会让页面内容突然上跳，用户感知极差。
