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 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

小结

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

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

常见误区

吸顶加购栏几个坑：一是Notice 元素要先手动开启，否则价格/库存等动态信息不显示；二是Sticky 定位要设 z-index，不然会被下方内容盖住；三是滚动显隐用 class 切换做过渡，别在 JS 里直接改 style 导致没有动画；四是移动端吸顶位置想清楚（顶部还是底部），底部更不挡阅读但要避开系统工具栏。阈值、方向、样式都按你的模板微调。这是纯构建器 + 少量 JS 的活，无需第三方插件。

常见问题（FAQ）

Q：为什么吸顶栏的价格不显示？ A：Notice 元素默认关闭，需在模板里手动开启才能显示动态价格和库存。

Q：吸顶栏被内容盖住了？ A：给吸顶区块设足够高的 z-index，避免被下方内容遮挡。

Q：需要写很多 JS 吗？ A：不多，核心是滚动时切换一个 class 控制显隐，配合 CSS 过渡即可。

Q：移动端放顶部还是底部好？ A：底部更不挡阅读，但要避开系统工具栏；具体按你的模板和用户习惯定。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程