Trying to change Wordpress sticky logo image src using jQuery

Question

I'm on wordpress, I want to change default logo when the header becomes sticky:
class .is-sticky appears and that's important.

( Also I'm using small plugin for transliteration - cyrillic to latin script, at the same time I'll be able to change sticky logo depending on current alphabet, because body have class body.cir or body.lat if is cyrillic/latin )

css targeting works fine, for example:

body.lat .is-sticky img.kad-standard-logo{
   border: solid 1px red;
}
body.cir .is-sticky img.kad-standard-logo{
   border: solid 1px blue;
}

or just to be more precise, (not to be confused with my alphabet classes) , .is-sticky class appears on page scroll and then I want to change logo,

adding border for example:

.is-sticky img.kad-standard-logo{
   border: solid 1px red;
}

It's OK.

I don't want to use:

content: url(logo.png)
background: url(logo.png)

I'm trying to change logo like this but it doesn't work :

jQuery(function($) {

   var cyril = "https://mysite.domain/images/logo_sticky-cir.png";
   var lats ="https://mysite.domain/images/logo_sticky-lat.png" ;
   var logoDefault = $('.kad-standard-logo').attr('src'); //Wordpress theme options default logo

   $('body.cir .is-sticky img.kad-standard-logo').attr('src', cyril);
   $('body.lat .is-sticky img.kad-standard-logo').attr('src', lats);
});

Maybe class .is-sticky is in some conflict, because it's from main scripts for sticky header or whatever and when is excluded from script:

$('body.cir img.kad-standard-logo').attr('src', cyril);
$('body.lat img.kad-standard-logo').attr('src', lats);

or just

$('img.kad-standard-logo').attr('src', lats);

it works,

but I need when .is-sticky

I hope this description is understandable,

Any suggestions, please,

Thanks.

user_1674992 · Answer

This JS is executed on pageload, and since you're using the jQuery(function(){}) form it will actually wait until the DOMContentLoaded event is fired. Basically, this code will only change something if the img is already sticky when you load the page. It isn't, so there's nothing to change. That's why when you drop the .is-sticky, it works.

To accomplish what you want, you'd need to listen for the class change, or bind a custom event and fire it: Wait until HTML elements gets a class then do something

I would personally recommend using a container and CSS background-image to do this, which will be much faster and more performant anyway. Feel free to use CSS sugar like transition: background-image 0.2s ease-in so the change isn't choppy. I strongly recommend going this route than loading the page up with expensive JS.

Ex.:

body img.kad-standard-logo {
    transition: background-image 0.2s ease-in;
}

body.lat .is-sticky img.kad-standard-logo {
    background-image: url(https://mysite.domain/images/logo_sticky-lat.png);
}

body.cir .is-sticky img.kad-standard-logo {
    background-image: url(https://mysite.domain/images/logo_sticky-cir.png);
}

Trying to change Wordpress sticky logo image src using jQuery

1 Answers