WooCommerce 滚动吸顶 Add to Cart 区块（Bricks）

本文为付费教程的骨架翻译：场景与步骤按原文梳理，锁定部分的代码按 Bricks 官方机制补全实现，并已注明「补全实现」。未复制原文代码。

场景：长商品页的吸顶购买栏

商品详情页通常很长（轮播图、描述、参数、评价……），访客滚动到一半想下单，得滚回顶部找 Add to Cart 按钮，转化率大打折扣。本教程构建一个随滚动吸顶的购买区块：向下滚动时淡入出现，固定在浏览器顶部或底部边缘；滚回顶部时淡出消失。

因为整个区块在 Bricks 构建器里搭建，里面放什么、各断点怎么显示完全由你控制。区块里可以放：产品特色图、标题、价格、数量步进器和加入购物车按钮。虽然示例以 WooCommerce 产品页为载体，但吸顶逻辑本身适用于任何 Bricks 页面/模板。

Step 1：开启 Notice 元素

用户点击加入购物车后，需要一个反馈告诉用户「已加入」。Bricks 自带这个能力：

1. 进入 Bricks → Settings → WooCommerce。
2. 打开 Enable Bricks WooCommerce Notice element（启用 Bricks 的 WooCommerce 提示元素）并保存。
3. 之后就能在吸顶区块底部放一个 Notice 元素，加入购物车后自动显示成功提示。

这样就不需要任何第三方 WooCommerce 提示插件。

Step 2：构建吸顶区块骨架

1. 用 Bricks 编辑单产品模板（没有的话先建一个，并设置好模板条件，如「Product」类型）。
2. 在模板里添加一个 Section，作为吸顶购买区块的容器：
   • 内容：图片（产品特色图动态数据）、标题（{woo_title} 或产品标题动态数据）、价格（{woo_price}）、数量（{woo_quantity}）、加入购物车按钮（{woo_add_to_cart}）。
   • 样式：position: sticky（或 fixed，取决于放在顶部还是底部）、top: 0（顶部吸顶）或 bottom: 0（底部吸顶）、背景色、阴影、z-index 高于页面其他内容。
3. 给这个 Section 设置一个自定义类名，比如 brx-sticky-cart，供脚本引用。

在 Bricks 里 Sticky 定位可以：选中 Section → Style → Position → Sticky → 设置 top/bottom 偏移。滚动淡入淡出则交给下一步的脚本控制（默认先隐藏）。

Step 3：滚动显隐脚本（补全实现）

付费原文锁定，这里按 Bricks 机制补全实现。思路：滚动超过一定距离（如 600px，可调到产品图下方）时给区块加显示类，回到顶部附近移除：

// 补全实现：滚动显隐吸顶购买栏
document.addEventListener( 'DOMContentLoaded', function () {
  const stickyBar = document.querySelector( '.brx-sticky-cart' );
  if ( ! stickyBar ) return;

  const showAt = 600; // 滚动超过该距离后显示，按需调整

  const onScroll = () => {
    stickyBar.classList.toggle( 'is-visible', window.scrollY > showAt );
  };

  window.addEventListener( 'scroll', onScroll, { passive: true } );
  onScroll(); // 初始化
} );

配合 CSS（放在该 Section 的 STYLE → CSS 或全局自定义 CSS）：

.brx-sticky-cart {
  opacity: 0;
  visibility: hidden;
  transform: translateY( 100% );
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.brx-sticky-cart.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY( 0 );
}

底部吸顶时 translateY(100%) 让区块从下方滑入；顶部吸顶可改成 translateY(-100%)。脚本放 Bricks 页面/模板设置的 Scripts 里，类名与你的实际设置对应。

原理说明

• position: sticky 是纯 CSS 吸顶，不脱离文档流，滚动到阈值后钉住，是这类交互的最简实现。
• 显隐用「类名 + transition」而不是 display 切换，是为了让淡入/滑入有动画，同时 visibility 保证隐藏时不拦截点击。
• passive: true 的滚动监听不阻塞主线程，长页面滚动更流畅。
• Notice 元素由 Bricks 原生支持，联动加购反馈不需要额外插件。

小结

吸顶购买栏 = Bricks 原生元素排布（图/标题/价格/数量/按钮）+ Sticky 定位 + 一个滚动显隐脚本。骨架完整，锁定部分按 Bricks 机制补全实现，阈值、方向、样式按你的模板微调即可。

小结：WooCommerce 吸顶加购栏在 Bricks 里是纯构建器 + 少量 JS 的活。关键点：Notice 元素要手动开启、Sticky 定位要设 z-index、滚动显隐用 class 切换过渡。