如何实现Footer滚动至视图后固定在页面底部？

我需要实现这样的滚动效果：页面内容过多时Footer默认藏在视口下方，只有滚动到内容末尾时Footer才会显示并固定在屏幕底部，同时内容可以一直滚动到屏幕顶部（留出Footer的高度空间），效果类似VSCode的文件滚动：

当前我使用的代码如下，但这个实现是内容完全滚到顶部才显示Footer，不符合需求：

现有代码 #

#content {
  padding-bottom: 90vh;
}

<div id="container">
<div id="content">
<p>content</p>
<p>content</p>
<!-- 省略大量重复的content段落 -->
<p>LAST CONTENT</p>
</div>
<footer>I'm the footer</footer>
</div>

解决方案 #

方案一：纯CSS实现（推荐）

利用position: sticky特性可以实现无JS的效果，核心是通过容器高度和定位属性控制Footer的显示时机：

/* 重置默认样式，避免干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
}

#container {
  min-height: 100vh;
  position: relative;
}

#content {
  /* 底部留白等于Footer高度，确保最后一行内容不被固定的Footer遮挡 */
  margin-bottom: 60px;
}

footer {
  height: 60px;
  background: #f0f0f0;
  padding: 1rem;
  /* 关键：Sticky定位，初始在视口外，滚动到内容底部时固定 */
  position: sticky;
  bottom: 0;
  top: 100vh;
}

原理说明：

• #container设置min-height:100vh，确保容器至少占满视口，让Footer初始处于视口下方。
• Footer的position: sticky结合top:100vh，使它一开始在视口底部外，当内容滚动到底部时，Footer会被“粘”在视口底部。
• #content的margin-bottom与Footer高度一致，保证最后一行内容能完全露出，不会被固定的Footer遮挡。

如果需要适配内容较短的场景（内容高度小于视口时，Footer直接显示在底部），可以调整容器为Flex布局：

#container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#content {
  flex: 1;
  margin-bottom: 60px;
}

footer {
  height: 60px;
  background: #f0f0f0;
  padding: 1rem;
  position: sticky;
  bottom: 0;
  top: calc(100vh - 60px);
}

方案二：JavaScript增强方案

如果纯CSS的某些边界场景不符合预期，可以通过监听滚动事件动态控制Footer的定位：

const footer = document.querySelector('footer');
const content = document.getElementById('content');
const footerHeight = footer.offsetHeight;

window.addEventListener('scroll', () => {
  const contentBottom = content.getBoundingClientRect().bottom;
  const viewportHeight = window.innerHeight;

  if (contentBottom <= viewportHeight) {
    // 内容底部进入视口，固定Footer
    footer.style.position = 'fixed';
    footer.style.bottom = '0';
    content.style.paddingBottom = `${footerHeight}px`;
  } else {
    // 内容未滚到底部，Footer回到原位
    footer.style.position = 'static';
    content.style.paddingBottom = '0';
  }
});

原理说明：

• 监听页面滚动，计算内容底部与视口底部的位置关系。
• 当内容底部进入视口范围时，将Footer设为fixed固定在底部，并给内容添加对应高度的padding，避免内容被遮挡。
• 当内容还未滚到底部时，恢复Footer的默认定位，移除内容的padding。

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