JavaScript滚动监听功能失效，header滚动超250px背景色不变如何解决？

问题原因排查与修复方案 #

核心错误点

• DOM选择器写法错误
  你原有代码中const header = document.querySelector(".header .container");的选择器含义是查找class为header的元素的后代中class为container的元素，但你的HTML结构里的目标元素是<div class="header container">，它本身同时带有header和container两个类，没有嵌套关系，所以这个选择器匹配不到任何元素，自然无法修改样式。
• HTML转义字符未还原
  你提供的代码里出现的>是HTML转义后的大于号，实际写入JS文件时要替换为原生的>符号，否则会触发语法错误。
• 可选CSS适配
  如果你的header没有设置position: fixed或position: sticky，页面滚动时header会跟着内容一起向上走，就算背景色修改了你也看不到效果，需要在CSS中补充对应配置：

.header.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 保留你原有其他样式 */
}

修复后完整代码

// 确保JS在DOM加载完成后执行，避免找不到元素
document.addEventListener('DOMContentLoaded', () => {
  const hamburger = document.querySelector(
    ".header .nav-bar .nav-list .hamburger"
  );
  const mobile_menu = document.querySelector(".header .nav-bar .nav-list ul");
  const menu_item = document.querySelectorAll(
    ".header .nav-bar .nav-list ul li a"
  );
  // 修复选择器，两个类名之间不加空格表示匹配同时带两个类的元素
  const header = document.querySelector(".header.container");

  document.addEventListener("scroll", () => {
      const scroll_position = window.scrollY;
      // 替换转义字符为原生大于号
      if (scroll_position > 250) {
          header.style.backgroundColor = "#29323c";
      } else {
          header.style.backgroundColor = "transparent";
      }
  });
})

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