Ayanize Ayanize - 5 months ago 9
jQuery Question

Switch logo using jQuery

I am using Divi WordPress theme which adds the class

.et-fixed-header
to
#main-header
while scrolling down. In the header there is the logo which I wish to change when there is the class
.et-fixed-header
.

Here is my jQuery:

$(document).scroll(function () {
if ($('#main-header').hasClass( 'et-fixed-header' )) {
$('#logo').attr('src', 'new-img.png');
}


});


My question is, how to get this to default logo when there is no
.et-fixed-header
in the
#main-header
. My code is replacing the logo when I scroll down but it does not go to the default logo when I scroll up or in other words, when there is no such class
.et-fixed-header
in the
#main-header
. I understand I need to place an
else
statement but not sure of the code. Any help will be appreciative.

Edit

The logo is uploaded via theme options and not placing manually by the users

Answer

Set the original logo to a js variable and then you'll have it to switch back to when #main-header loses it's .et-fixed-header class.

var origImage = '';
$(document).scroll(function () {
    if($('#logo').attr('src') != 'new-img.png') {
        origImage = $('#logo').attr('src')
    }
    if ($('#main-header').hasClass( 'et-fixed-header' )) {
        $('#logo').attr('src', 'new-img.png');
    }
    else {
        $('#logo').attr('src', origImage);
    }
});
Comments