最简方案是：父容器需有明确高度或可滚动内容，设position: sticky; top: 16px，禁用overflow: hidden/auto及transform/filter等干扰属性。

用 position: sticky 实现滚动固定（最简方案）

position: sticky 是专为这种场景设计的，比 fixed 更合理：它只在滚动到临界点时“粘住”，不影响文档流，也不需要手动计算滚动位置。

• 必须给父容器设明确高度或有可滚动内容，否则 sticky 不触发
• 父元素不能是 overflow: hidden 或 auto（除非该父容器本身是滚动容器）
• 要指定 top 值，比如 top: 16px 表示距离视口顶部 16px 时开始吸附
• 在 Safari 旧版本中需加 -webkit-sticky 前缀（iOS 15.4+ 已基本无须）

<div class="product-section">
  <h2>商品详情</h2>
  <p>……大量描述文本……</p>
  <button class="add-to-cart" type="button">加入购物车</button>
</div>

.add-to-cart {
  position: -webkit-sticky;
  position: sticky;
  top: 16px;
  background: #ff6b35;
  color: white;
  border: none;
  padding: 12px 24px;
}

为什么不用 position: fixed？

fixed 会让按钮完全脱离文档流，导致几个实际问题：

• 按钮会盖住页面底部内容（比如页脚），且无法随内容自然收起
• 页面缩放或横屏时位置容易错乱，尤其在移动端
• 如果页面有侧边栏或多列布局，fixed 需手动算 left/right，维护成本高
• 无障碍体验差：屏幕阅读器可能跳过 fixed 元素，或误判其上下文

而 sticky 天然保留在 DOM 顺序中，语义清晰，适配响应式也更稳。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

常见失效原因和排查点

sticky 不生效，90% 是以下情况之一：

• 父级元素高度为 0 或未设置 min-height，导致没有“滚动空间”
• 父元素设置了 overflow: hidden、scroll 或 auto（除非你明确想让它在该容器内 sticky）
• 按钮本身或任意祖先元素有 transform、filter、will-change，这些会创建新的层叠上下文并禁用 sticky
• 使用了 Flex/Grid 容器但未设 align-items: flex-start，导致子项垂直居中后 top 基准偏移

移动端适配要注意什么？

iOS Safari 对 sticky 的兼容性较好，但仍有细节要处理：

• 避免把 sticky 按钮放在 height: 100vh 的全屏容器里——它没滚动空间，sticky 就不会激活
• 不要用 touch-action: none 或 overscroll-behavior: contain 拦截滚动，可能干扰 sticky 判定
• 如果按钮在底部吸底（如 bottom: 0），注意 iOS 键盘弹出时视口高度变化，建议监听 resize 事件微调

复杂点在于：sticky 的行为依赖于滚动容器的边界，而不同浏览器对“哪个容器是滚动上下文”的判定略有差异。别假设父元素一定就是滚动容器——打开 DevTools 的 Layers 面板，看滚动区域是否真的包含你的按钮。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！