滚动时更改Header颜色功能失效问题求助

问题点及修复步骤： #

1. 类名操作错误
   classList.add/remove()方法接收的是单个类名，不是带点的选择器字符串。你写的header.classList.remove('header.active')是错误的，应该只传'active'。

2. 事件监听重复绑定
   把window.addEventListener('scroll', changeRectangle)放在函数内部，会导致每次触发函数时都新增一个滚动监听，最终造成事件多次触发、性能问题。应该把监听放在函数外部，确保只绑定一次。

3. HTML结构无效
   代码里有两个<body>标签，不符合HTML规范，所有页面内容必须放在同一个<body>标签内。

4. 滚动区域设置不合理
   .lowerbackground的top:5000px会让内容在极端靠下的位置，几乎没法滚动到触发条件，建议调整为合理值，比如top:100px，让页面有足够的滚动空间。

修正后的完整代码： #

JavaScript（index.js）

const header = document.getElementById('header');

function changeRectangle() {
  const scrollValue = window.scrollY;
  if (scrollValue < 150) {
    header.classList.remove('active');
  } else {
    header.classList.add('active');
  }
}

// 初始化绑定滚动事件
window.addEventListener('scroll', changeRectangle);

CSS（styles.css）

* {
  margin: 0;
  padding: 0;
}

.header.active {
  background: rgb(0, 0, 0);
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.header {
  position: fixed;
  height: 100px;
  width: 100%;
  z-index: 4;
  top: 0;
  left: 0;
  padding: 0;
  transition: all 1s;
  background-color: gray;
}

.lowerbackground {
  height: 1000px;
  width: 100%;
  background: white;
  position: absolute;
  top: 100px; /* 调整为合理位置，确保能滚动 */
}

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="header" class="header"></div>
  <div class="lowerbackground"></div>
  
  <script src="index.js"></script>
</body>
</html>

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