Question

我正在使用的WordPress主题添加了两个徽标，一个是网站加载时的黑色徽标，另一个是滚动时激活粘性导航时更轻的一个徽标。当粘性导航处于活动状态时，“滚动”类将添加到包含div“scroll_header_top_area”。

如果我已经向下滚动页面并且粘性导航处于活动状态并刷新页面，则下面的代码有效，但滚动时它不会动态切换徽标。

我已经看到了使用MutationObserver的建议，但我担心我无法理解这个例子或如何在这里使用它。

如何根据“滚动”类是否处于活动状态来更改此代码以使更改动态化。

if  ( $j('.scroll_header_top_area').hasClass('scrolled'))  {

    $j(".q_logo img").attr("src","path_to_image/light.png");
}

else {
    $j(".q_logo img").attr("src","path_to_image/dark.png");
}

Answer 1

听起来你需要一个事件处理程序。这将处理滚动事件。

$j(".q_logo img").attr("src","path_to_img/dark.png");   

$( window ).scroll(function() {

    if( $j('.scroll_header_top_area').hasClass('scrolled'))
    {
        $j(".q_logo img").attr("src","path_to_image/light.png");
    }
    else{
        $j(".q_logo img").attr("src","path_to_image/dark.png");
    }
});

在类更改时，使用jQuery更新HTML属性

1 个答案: