javascript - 根据其他元素状态/类有条件地将类添加到元素

Question

我试图在向下滚动页面后隐藏图像。当滚动我的 header 时，会得到一个类 fl-theme-builder-header-scrolled。我的图像 div 有一个类 hiding-image，我想在 fl-theme-builder-header-scrolled 时添加一个类 image-off > 类显示在标题中。 这就是我所拥有的:

$(document).ready(function() {
if($( 'header' ).hasClass( 'fl-theme-builder-header-scrolled' )) {
    $( '.hiding-image' ).toggleClass( 'image-off' );
} 
});

但这不起作用。有什么建议吗？谢谢。

Answer 1

您的代码仅在文档准备好后、页面加载后运行一次。因此，如果 header 没有 fl-theme-builder-header-scrolled 类并且只是稍后添加，您的代码将不会再次运行。

你需要一个突变观察者。 检查此线程:Event trigger on a class change

或者，您可以按照@Brewal所说的那样，将代码评估放在滚动事件上。不过要小心，不要在每次触发滚动事件时都运行代码，因为它会降低网站性能，特别是在移动设备上。