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

Posted 2023-05-09

【中文标题】jQuery + One Page Scroll 插件：检查元素 hasClass 是不是不起作用

【英文标题】：jQuery + One Page Scroll plugin: check if element hasClass not workingjQuery + One Page Scroll 插件：检查元素 hasClass 是否不起作用

【发布时间】：2020-01-18 20:51:42

【问题描述】：

我将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");


);

提前致谢。

【参考方案1】：

尝试使用afterMove 事件

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