Question

向下滚动页面后，我试图隐藏图像。滚动时，我的header得到一个类fl-theme-builder-header-scrolled。我的图片div有一个类hiding-image，并且我想在image-off中出现fl-theme-builder-header-scrolled类时添加一个类header。这就是我所拥有的：

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

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

Answer 1

页面加载后，文档准备就绪后，您的代码仅运行一次。因此，如果标头不具有fl-theme-builder-header-scrolled类，并且仅在以后添加，则您的代码将不会再次运行。

您需要一个突变观察者。检查以下线程：Event trigger on a class change

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

Answer 2

尝试这样的事情。

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

});

Answer 3

正如评论中指出的那样，我认为最好的方法是找到fl-theme-builder-header-scrolled类已经被控制的位置。

但是，如果您确实希望将逻辑放在单独的区域中，则可以这样做：

$(document).ready(function () {

$(window).scroll(function () { //attach to window scroll event

    if ($('header').hasClass('fl-theme-builder-header-scrolled') && !$('.hiding-image').hasClass('image-off')) {
        $('.hiding-image').addClass('image-off'); //add class only if it does not already exist;
    } else {
        if ($('.hiding-image').hasClass('image-off')) {
            $('.hiding-image').removeClass('image-off'); //remove class
        }
    }

   });
});

Answer 4

检查条件如下：

`$(window).scroll(function() {
    if($( 'header' ).hasClass( 'fl-theme-builder-header-scrolled' )) 
    {
        $( '.hiding-image' ).addClass( 'image-off' );
    }
    else
    {
        $( '.hiding-image' ).removeClass( 'image-off' );
    }
});`

Answer 5

我终于设法做到这一点：

(function($){
  $(function(){
    var headerThemer = $( '.fl-builder-content[data-type=header]' ).eq(0);
    $(window).on( 'scroll.fl-theme-builder-header-scrolled', function(){
        if ( headerThemer.hasClass('fl-theme-builder-header-scrolled') ) {
            $('.hiding-image').hide();
        }
        else {
            $('.hiding-image').show();
        }
    });
  })
})(jQuery);

根据其他元素状态/类有条件地向元素添加类

5 个答案: