实现页脚默认隐藏于主体后方，滚动时逐步显示的效果

问题根源 #

当前页脚使用position: fixed和z-index: -1，结合body的布局设置，导致页脚位置异常；同时缺少滚动触发的动态控制逻辑，无法实现“滚动时逐渐显示、内容充足仅底部可见”的效果。

步骤1：调整基础CSS布局 #

修改body和footer样式，让页脚处于文档流底部，初始隐藏在视口外：

/* BODY */
body {
  font-family: Consolas;
  color: white;
  background-color: #151515;
  margin-left: 12%;
  margin-right: 12%;
  margin-bottom: 60px; /* 为页脚预留空间 */
  box-shadow: 100px 0 100px -100px black; /* 修正原阴影语法错误 */
  min-height: 100vh; /* 内容不足时页面占满视口 */
  position: relative; /* 为绝对定位的页脚提供参考 */
}

/* FOOTER */
footer {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
  background-color: whitesmoke;
  color: #151515; /* 避免白背景白文字 */
  padding: 10px 0;
  transform: translateY(100%); /* 初始隐藏在视口下方 */
  transition: transform 0.3s ease; /* 平滑过渡动画 */
}

步骤2：添加滚动监听逻辑 #

通过JS监听滚动事件，动态调整页脚显示状态：

const footer = document.querySelector('footer');
const body = document.body;

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const pageHeight = Math.max(
    body.scrollHeight,
    body.offsetHeight,
    document.documentElement.clientHeight,
    document.documentElement.scrollHeight,
    document.documentElement.offsetHeight
  );
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  const remainingScroll = pageHeight - scrollTop - viewportHeight;
  const footerHeight = footer.offsetHeight;

  if (remainingScroll <= footerHeight) {
    const translateYValue = Math.max(0, remainingScroll) - footerHeight;
    footer.style.transform = `translateY(${translateYValue}px)`;
  } else {
    footer.style.transform = 'translateY(100%)';
  }
});

// 页面加载时初始化状态
window.dispatchEvent(new Event('scroll'));

效果说明 #

• 内容较短时：滚动页面，页脚随滚动逐渐从底部滑入并完全显示；
• 内容较长时：仅滚动到页面最底部，页脚才会完全显示，不会遮挡主体内容。

内容的提问来源于stack exchange，提问作者Lele