CODEWITHSUNDEEP
jquerywordpress
Ayanize
Ayanize

Reputation: 495

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

Upvotes: 0

Views: 101

Answers (1)

Brian Ray
Brian Ray

Reputation: 1492

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

Upvotes: 1

Related Questions