JavaScript滚动事件控制页脚样式失效问题排查

问题根源分析 #

你的代码存在两处关键错误，导致样式无法生效：

1. CSS 语法错误

.footer.scrolled 中的 transform: height(100px) 是无效写法，CSS 的 transform 属性不支持 height() 函数。要实现页脚消失的效果，正确做法是通过 transform: translateY(100%) 将页脚完全移出视口（页脚固定在底部，向下移动自身高度就会消失），或者结合 height 和 overflow 属性实现隐藏。

修正后的 CSS：

.footer {
  font-family: "lato", sans-serif;
  padding: 20px;
  line-height: 1.2;
  text-align: right;
  background: #eee;
  color: #0D47A1;
  font-size: 13px;
  height: 80px;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  transition: all 500ms ease; /* 加入ease让过渡更自然 */
}

.footer.scrolled {
  /* 向下移动自身高度，完全移出视口 */
  transform: translateY(100%);
  /* 也可以用以下写法，通过高度收缩隐藏 */
  /* height: 0; */
  /* padding: 0; */
  /* overflow: hidden; */
}

2. JavaScript 语法错误

原生 JavaScript 中没有 .footer.addStyleName() 这种写法，你需要先获取页脚的 DOM 元素，再通过 classList API 添加/移除类名：

修正后的 JavaScript：

function hideFooter() {
  // 获取页脚DOM元素
  const footer = document.querySelector('.footer');
  if (window.pageYOffset > 10) {
    // 添加scrolled类
    footer.classList.add('scrolled');
  } else {
    // 移除scrolled类
    footer.classList.remove('scrolled');
  }
}

完整可运行示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚动隐藏页脚</title>
  <style>
    .footer {
      font-family: "lato", sans-serif;
      padding: 20px;
      line-height: 1.2;
      text-align: right;
      background: #eee;
      color: #0D47A1;
      font-size: 13px;
      height: 80px;
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
      transition: all 500ms ease;
    }

    .footer.scrolled {
      transform: translateY(100%);
    }
  </style>
</head>
<body>
  <!-- 足够长的内容触发滚动 -->
  <div style="height: 2000px; padding: 20px;">
    向下滚动查看页脚隐藏效果...
  </div>
  
  <footer class="footer">
    这是页脚内容
  </footer>

  <script>
    function hideFooter() {
      const footer = document.querySelector('.footer');
      if (window.pageYOffset > 10) {
        footer.classList.add('scrolled');
      } else {
        footer.classList.remove('scrolled');
      }
    }
    // 用事件监听替代内联绑定，代码更规范
    window.addEventListener('scroll', hideFooter);
  </script>
</body>
</html>

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