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/

结论

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