HTML页面滚动背景色切换功能失效排查及解决方案咨询

核心问题定位 #

你的代码在项目中失效，主要是以下几个关键问题导致：

• JS选择器与实际HTML结构完全不匹配
• 可能存在DOM未加载完成就执行JS的情况
• 项目现有样式可能覆盖了背景色切换类

分步修复方案 #

1. 修正JS选择器错误 #

原JS代码里的$body和$panel选择器完全错误，替换为匹配HTML结构的正确选择器：

$(window)
  .scroll(function () {
    // 修正选择器：对应HTML中的容器和面板
    var $window = $(window),
      $body = $(".body"), // 匹配HTML里的<div class="body">容器
      $panel = $(".panel"); // 匹配所有带panel类的面板

    var scroll = $window.scrollTop() + $window.height() / 3;

    $panel.each(function () {
      var $this = $(this);

      if (
        $this.position().top <= scroll &&
        $this.position().top + $this.height() > scroll
      ) {
        $body.removeClass(function (index, css) {
          return (css.match(/(^|\s)color-\S+/g) || []).join(" ");
        });

        $body.addClass("color-" + $(this).data("color"));
      }
    });
  })
  .scroll();

2. 确保JS在DOM加载后执行 #

如果你的ourstory.js是在<head>中引入的，必须把代码包裹在DOM就绪事件中，避免DOM未加载完成时执行：

$(document).ready(function() {
  // 上面修正后的滚动逻辑代码放在这里
});

3. 解决样式优先级冲突 #

如果项目中其他样式覆盖了背景色切换类，给颜色类提升权重：

/* 给颜色类添加容器前缀，提升优先级 */
.body.color-violet {
  background-color: #7A4EAB;
}
.body.color-indigo {
  background-color: #4332CF;
}
.body.color-blue {
  background-color: #2F8FED;
}
.body.color-green {
  background-color: #4DCF42;
}
.body.color-yellow {
  background-color: #FAEB33;
}
.body.color-orange {
  background-color: #F19031;
}
.body.color-red {
  background-color: #F2293A;
}
/* 新增white类，对应第一个面板的默认背景 */
.body.color-white {
  background-color: #f4f4f4;
}

4. 验证资源加载 #

• 打开浏览器控制台，输入$，返回函数说明jQuery加载正常；若报错，检查CDN链接是否可用，或替换为本地jQuery文件
• 查看浏览器网络面板，确认ourstory.js是否成功加载，404则调整文件路径

修复后的完整代码示例 #

HTML #

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link rel="stylesheet" href="/styles/your-style-file.css">
</head>
<body>
  <div class="body">
    <div class="panel" data-color="white">
      <div>
        <h1>滚动切换背景色</h1>
        <p>滚动页面，当全屏面板进入视野时，容器背景色会自动切换</p>
      </div>
    </div>
    <div class="panel" data-color="violet">
      <h2>紫色面板</h2>
    </div>
    <div class="panel" data-color="indigo">
      <h2>靛蓝色面板</h2>
    </div>
    <div class="panel" data-color="blue">
      <h2>蓝色面板</h2>
    </div>
    <div class="panel" data-color="green">
      <h2>绿色面板</h2>
    </div>
    <div class="panel" data-color="yellow">
      <h2>黄色面板</h2>
    </div>
    <div class="panel" data-color="orange">
      <h2>橙色面板</h2>
    </div>
    <div class="panel" data-color="red">
      <h2>红色面板</h2>
    </div>
  </div>
  <script src="/scripts/ourstory.js"></script>
</body>
</html>

CSS #

.body {
  color: #000;
  background-color: #f4f4f4;
  transition: background-color 1s ease;
  margin: 0;
  padding: 0;
}

.panel {
  min-height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: sans-serif;
}

.body.color-white {
  background-color: #f4f4f4;
}
.body.color-violet {
  background-color: #7A4EAB;
}
.body.color-indigo {
  background-color: #4332CF;
}
.body.color-blue {
  background-color: #2F8FED;
}
.body.color-green {
  background-color: #4DCF42;
}
.body.color-yellow {
  background-color: #FAEB33;
}
.body.color-orange {
  background-color: #F19031;
}
.body.color-red {
  background-color: #F2293A;
}

/* 演示样式 */
.body {
  text-align: center;
  font-size: 120%;
  line-height: 1.618;
}
.body h1, h2 {
  font-size: 3em;
  letter-spacing: -0.05em;
  line-height: 1.1;
}
.body p {
  max-width: 30em;
  margin-bottom: 1.618em;
}

JS（ourstory.js） #

$(document).ready(function() {
  $(window)
    .scroll(function () {
      var $window = $(window),
        $body = $(".body"),
        $panel = $(".panel");

      var scroll = $window.scrollTop() + $window.height() / 3;

      $panel.each(function () {
        var $this = $(this);
        if (
          $this.position().top <= scroll &&
          $this.position().top + $this.height() > scroll
        ) {
          $body.removeClass(function (index, css) {
            return (css.match(/(^|\s)color-\S+/g) || []).join(" ");
          });
          $body.addClass("color-" + $(this).data("color"));
        }
      });
    })
    .scroll();
});

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