滚动至页面底部时如何切换固定Footer的样式？

问题背景 #

我已经实现了一个始终固定在页面底部的sticky footer（即使页面滚动也保持可见），核心代码如下。现在需要实现当用户滚动到页面最底部时，隐藏footer的box-shadow。

现有核心代码 #

CSS代码

body {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

header, footer {
  background: white;
  padding: 5px;
  text-align: center;
}

footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  box-sizing: border-box;
  box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);
}

main {
  text-align: center;
  padding: 14px 0 100px 14px;
}

button {
  padding: 7px 10px;
  margin: 0 0 8px 0;
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

HTML代码

<header><h2>Sticky Footer with Position Fixed</h2></header>
<main>
  <p>This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.</p>
</main>
<footer><h2>Sticky Footer</h2></footer>

解决方案 #

要实现滚动到底部隐藏阴影的效果，需要结合JavaScript监听滚动状态，动态切换footer的样式。

步骤1：添加CSS类控制阴影 #

在原有CSS中新增一个类，用于移除footer的阴影：

.footer-no-shadow {
  box-shadow: none !important;
}

步骤2：编写滚动监听逻辑 #

添加JavaScript代码，监听页面滚动事件，判断是否到达底部并切换样式：

// 获取footer元素
const footer = document.querySelector('footer');

// 监听滚动事件
window.addEventListener('scroll', () => {
  // 计算页面滚动相关参数
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;

  // 判断是否滚动至底部（预留1px误差，适配不同浏览器）
  const isAtBottom = scrollTop + windowHeight >= documentHeight - 1;

  // 切换阴影类
  if (isAtBottom) {
    footer.classList.add('footer-no-shadow');
  } else {
    footer.classList.remove('footer-no-shadow');
  }
});

步骤3：优化性能（可选） #

滚动事件会频繁触发，使用防抖函数可以减少事件执行次数，提升页面性能：

// 防抖函数
function debounce(func, delay = 100) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 用防抖后的函数监听滚动
window.addEventListener('scroll', debounce(() => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;
  const isAtBottom = scrollTop + windowHeight >= documentHeight - 1;

  const footer = document.querySelector('footer');
  // 用toggle方法简化类的切换
  footer.classList.toggle('footer-no-shadow', isAtBottom);
}));

原理说明 #

• 通过scrollTop（已滚动的垂直距离）+ windowHeight（浏览器视口高度）与documentHeight（页面总高度）的对比，判断是否到达页面底部
• 使用classList.add/remove或toggle方法动态控制footer的阴影样式
• 防抖函数可以限制事件触发的频率，避免频繁执行DOM操作导致的页面卡顿

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