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

Question

我正在使用 this plugin 和 jQuery，并且我有一个 div 作为背景 image/color 填充视口。我想在给定部分处于活动状态时更改背景（插件已配置为将当前可见部分的 class 更改为 "active"）。

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

$(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");
  }
});

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

jQuery + One Page Scroll plugin: check if element hasClass not working

javascript

jquery

jquery-plugins