Conditionally add class to element based on other element status/class

Question

I'm trying to hide an image after I scroll down my page. When scrolling my header gets a class fl-theme-builder-header-scrolled. My image div has a class hiding-image and I want to add a class image-off when the fl-theme-builder-header-scrolled class shows up in the header. This is what I have:

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

but this doesn't work. Any advice? Thx.

What is adding the `fl-theme-builder-header-scrolled` class? — Erik Philips, Nov 28 '19 at 16:28
To add to what @ErikPhilips said, I think the best approach is to put your logic where the ```fl-theme-builder-header-scrolled``` is getting toggled — Chif, Nov 28 '19 at 16:35

score 2 · Answer 1 · answered Nov 28 '19 at 16:27

Your code only runs once after the document ready, as soon as the page loads. So if the header doesn't have the fl-theme-builder-header-scrolled class and only gets added later, your code will not run again.

You need a a mutation Observer. Check this thread: Event trigger on a class change

Alternatively you can do as @Brewal is saying, putting the code evaluation on the scroll event. Although be careful so you don't run the code every time the scroll event is triggered since it can slow your website performance, specially on mobile devices.

score 0 · Answer 2 · answered Nov 28 '19 at 16:36

0

Try something like this.

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

});

answered Nov 28 '19 at 16:36

Afia

683
5
17

Produce your code in a sandbox like codepen.io or jsfiddle so I can take a look at why it wouldn't work. – Afia Dec 02 '19 at 17:18

score 0 · Answer 3 · answered Nov 28 '19 at 16:41

As pointed out in the comments, I think the best approach would be to find where the fl-theme-builder-header-scrolled class is already being controlled.

However, If you really would want to put the logic in a separate area, you can do it like this:

$(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
        }
    }

   });
});

score 0 · Answer 4 · answered Nov 29 '19 at 04:38

Check condition like this:

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

score 0 · Accepted Answer · answered Dec 10 '19 at 09:55

I finally managed to make it work doing this:

(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);

Conditionally add class to element based on other element status/class

5 Answers5