Bricks 页脚滑动露出效果（Sticky Footer Reveal）

想让 Bricks 网站的页脚做出这种「滑动露出」的效果吗？——平时页脚藏在页面底部看不见，滚动到最底部时它才从下方滑出来，而不是一直占据页面空间。

实现方法

只需把下面的 CSS 加到站点里（比如子主题的 style.css 或 Bricks 的 Custom CSS）：

main {
  /* 保证铺满整屏 */
  min-height: 100vh;
  /* 需要实色背景来遮住底下的页脚 */
  background: white;
  /* 盖在页脚上面 */
  position: relative;
  z-index: 1;
}
#brx-footer {
  /* 贴在底部 */
  position: sticky;
  bottom: 0;
  left: 0;
}

原理说明

• main（正文区域）强制撑满至少一屏高度，并配上实色背景，把页脚严严实实盖在下面；

• #brx-footer（Bricks 的页脚容器）用 position: sticky; bottom: 0 贴在视口底部；

• 于是滚动过程中页脚始终藏在 main 的白色背景后面，只有当滚动到页面最底部、main 的内容滚完时，页脚才从下方露出来。

background 颜色记得按你站点的实际背景色调整，否则遮不住页脚。

来源：https://css-tricks.com/the-slideout-footer/

相关阅读：

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

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

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

结论

原理上就是「正文压住页脚 + 页脚 sticky 贴底」的组合，几十行 CSS 就能给站点加一个精致的页脚滑动露出效果，且不需要任何 JavaScript。

适用场景与性能

页脚滑动露出适合内容型站点、作品集、落地页——平时把页脚藏起来，滚到底才优雅地滑出，视觉更精致、首屏也更干净。实现纯 CSS、零 JS，性能上没有负担。要注意两点：一是正文区必须有足够高度把页脚压在视口下方，否则「露出」效果出不来；二是页脚本身要 sticky 贴底 + 正文背景盖住它，层级和背景色要配好，否则滚动时页脚会提前漏出来。移动端同样适用，但小屏页脚内容别堆太多，避免滑出后占掉大半个屏幕。

常见问题（FAQ）

Q：这个效果需要写 JS 吗？ A：不需要，纯 CSS 就能实现，零 JavaScript 开销。

Q：页脚为什么没滑出来？ A：多半是正文区高度不够压不住页脚，或页脚没设 sticky 贴底、背景没盖住。

Q：移动端能用吗？ A：能，但小屏页脚内容别太多，避免滑出后占掉大半屏。

Q：会影响 SEO 吗？ A：页脚是正常 DOM 内容，不影响收录，只是视觉上延迟出现。

延伸阅读

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

获取报价 →浏览全部教程