CSS实现滚动时隐藏Banner 仅滚动到底部时固定显示在底部

原有代码问题说明 #

原有CSS存在两处拼写错误，会导致部分样式失效：

• padding值中25x单位拼写错误，正确单位为px
• 文本对齐属性名text-alight拼写错误，正确属性名为text-align
position: fixed的默认逻辑就是让元素始终相对于视口固定，因此滚动全程可见是该属性的正常表现，不符合需求属于属性选型问题，并非代码bug。

方案1：JS监听滚动（全场景兼容） #

该方案兼容性最好，不受页面结构限制。
首先修正CSS，设置Footer默认隐藏：

footer {
  position: fixed;
  /* 修正原有拼写错误 */
  padding: 20px 25px 20px;
  text-align: left;
  bottom: 0;
  z-index: 1;
  /* 默认隐藏 */
  display: none;
}
/* 滚动到底部时的显示状态 */
footer.visible {
  display: block;
}

添加滚动监听逻辑，判断滚动位置后切换Footer显示状态：

const footerEl = document.querySelector('footer');
window.addEventListener('scroll', () => {
  // 滚动位置 + 视口高度 >= 页面总高度 即为到达底部
  const reachBottom = window.scrollY + window.innerHeight >= document.documentElement.scrollHeight;
  footerEl.classList.toggle('visible', reachBottom);
}, { passive: true }); // 开启passive优化滚动性能

方案2：纯CSS实现（无需JS，现代浏览器支持） #

如果不想引入JS逻辑，可使用粘性定位实现，要求Footer为页面文档流的最后一个元素：

/* 清除默认边距，设置基础高度 */
html, body {
  margin: 0;
  padding: 0;
}
/* 页面主内容容器，撑满视口后多溢出1px，保证初始状态Footer在视口外 */
.main-content {
  min-height: calc(100vh + 1px);
}
footer {
  /* 修正原有拼写错误 */
  padding: 20px 25px 20px;
  text-align: left;
  /* 用sticky定位替代fixed */
  position: sticky;
  bottom: 0;
  z-index: 1;
}

实现逻辑：position: sticky会让元素在文档流中正常排列，仅当滚动到设置的阈值位置时才固定在视口对应位置。通过给内容区设置略大于视口的最小高度，初始状态Footer会被挤到视口范围外不可见，只有滚动到页面最底部时，Footer才会贴在视口底部显示。

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