Bricks 吸顶元素：用 position: sticky 让任意元素滚动吸顶

场景：让元素滚动吸顶

常见的吸顶需求有两种：

1. 页头吸顶：Header 本来就在页面顶部，滚动时希望它始终固定在浏览器顶部边缘。

2. 中部元素吸顶：某个区块在页面中部（比如侧边栏、工具条、价格表），用户往下滚动到它时，希望它贴在顶部不再滚走。

两种场景用同一条 CSS 规则就能解决：position: sticky。本文来自 BricksLabs 免费教程，纯样式设置，不写一行 JS。

三个关键设置

在 Bricks 编辑器中选中要做吸顶的元素，进入 STYLE → Position 面板：

1. Position 选择 sticky

2. Top 填 var(--wp-admin--admin-bar--height,0)——这个 CSS 变量是 WordPress 提供的：前台有管理员工具栏（admin bar）时等于工具栏高度，没有时回退为 0。用它做吸顶偏移，元素贴顶时自动避让管理员栏，不会出现被工具栏盖住的尴尬。

3. Z-index 设为 2（或更高）——保证吸顶后盖在普通内容之上。

此外建议给元素加一个背景色。sticky 元素吸顶后是浮在其他内容上面的，如果背景透明，下面滚动上来的文字会穿透显示，观感很差。

完整 CSS 参考

把下面的声明加到目标元素的自定义 CSS（STYLE → CSS → 自定义 CSS 输入框）即可，效果等价于上面的面板设置：

position: sticky;
top: var(--wp-admin--admin-bar--height, 0);
z-index: 2;
background-color: #ffffff;

原理说明

• sticky 与 fixed 的区别：fixed 让元素立即脱离文档流、永远相对视口定位；sticky 则是「先正常参与布局，滚动到指定偏移量时被钉住」。这意味着 sticky 元素不会像 fixed 那样一开始就飘起来，也不会挤压后续内容，更符合「滚动到它时再吸顶」的直觉。

• sticky 的生效前提：它只能在父容器范围内吸顶——元素滚动到父容器底部时会跟着父容器一起滚走。所以想让一个元素在整个页面内都吸住，父容器必须是足够高的主体容器，而不是一个矮小的 Div。

• var(--wp-admin--admin-bar--height,0)：WordPress 5.x 起通过 wp_add_inline_style 输出该变量，值为管理员栏高度或 0。直接引用它，吸顶偏移自动适配「登录状态有工具栏、未登录没有」两种情形，无需写媒体查询。

• z-index：sticky 属于定位元素，会创建新的层叠上下文；不设 z-index 时可能被后面的内容盖住，给个 2 保证置顶。

常见坑：sticky 不生效

如果设置了 sticky 却毫无反应，优先排查三点：

1. 父容器有 overflow: hidden / overflow: auto：sticky 的定位上下文是最近的可滚动祖先，父容器一旦设了 overflow 裁剪，sticky 元素会跟着被裁剪、完全失效。Bricks 的某些 Section/Container 默认样式或自定义 CSS 里可能带了 overflow，检查 STYLE → Overflow 面板。

2. 父容器高度不够：sticky 只能在自己父容器的范围内吸顶，容器到页面底部就结束，元素也跟着结束。想让元素全程吸住，直接父级必须是包裹全页内容的主体容器。

3. 没设 top 值：只设 position: sticky 不设 top，元素永远不会触发吸顶，因为没有任何偏移阈值。

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

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

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

小结

吸顶 = position: sticky + top 偏移 + z-index + 背景色，四件事，纯 CSS，零 JS、零插件。Bricks 的 Position 面板直接支持 sticky，配合 WP 官方 CSS 变量还能免费获得管理员栏避让能力。记住三个坑：父容器 overflow 会废掉 sticky、容器太矮吸不住、漏设 top 不触发。

适用场景与对比

position: sticky 适合页头吸顶、侧边栏目录跟随、表格表头固定、购买栏常驻这类「滚动时希望某块留在视口」的需求，纯 CSS 零 JS，性能比监听 scroll 事件的 JS 吸顶方案好得多。它和「fixed 固定定位」不同：fixed 是相对视口永远不动、会脱离文档流占不住原位置；sticky 是「滚到才吸、滚过就放开」，更自然也不挡内容。移动端同样生效，但要注意父容器在移动端别被 overflow 或高度问题废掉。配合 z-index 和背景色，避免被下方内容透出来。

常见问题（FAQ）

Q：sticky 和 fixed 有什么区别？ A：fixed 永远相对视口固定、脱离文档流；sticky 是滚到才吸、滚过就放开，更自然不挡内容。

Q：为什么 sticky 不生效？ A：常见是父容器有 overflow:hidden/auto、容器太矮吸不住、或漏了 top 偏移，逐条排查。

Q：吸顶会拖慢页面吗？ A：不会，sticky 是浏览器原生定位，比 JS 监听 scroll 的吸顶方案还轻。

Q：移动端能用吗？ A：能，但要注意移动端父容器别被 overflow 或高度问题废掉 sticky。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 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.

获取报价 →浏览全部教程