jQuery + One Page Scroll 插件：检查元素 hasClass 是否不起作用

Question

我将this plugin 与jQuery 一起使用，并且我有一个用于填充视口的背景图像/颜色的div。我想在给定部分处于活动状态时更改背景（插件已配置为将当前可见部分的类更改为“活动”）。

这是我正在使用的 js，但它并没有改变任何东西。标记看起来不错——但它只是默认为“其他”条件。会不会和插件有冲突？

$(document).ready(function () {

$(".main").onepage_scroll({
    sectionContainer: "section",
    loop: false
});


if ($('#test').hasClass('active')) {
    $('#project-image').css("background", "red");
} else {
    $('#project-image').css("background", "yellow");
}

});

提前致谢。

Answer 1

尝试使用afterMove 事件

$(".main").onepage_scroll({
  sectionContainer: "section",
  loop: false,
  afterMove: function(index) {
    $('#project-image').css("background", $('#test').hasClass('active') ? "red" : "yellow");
  }
});