2

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.

Wahab Shah
  • 2,066
  • 1
  • 14
  • 19
arteaster
  • 21
  • 3
  • Hey OP, welcome to SO. Can you give me an example of what the logo element looks like, or even just send the website so we can have an example to work off of? The code you wrote seems pretty OK on its face, nothing obviously wrong that I can tell. – Lewis Jul 04 '20 at 19:52
  • OK, there is the link, site is just for testing purpose, https://arteaster.com/sorigin/ – arteaster Jul 04 '20 at 20:07
  • And of course Thanks for the welcome @Christian ! – arteaster Jul 04 '20 at 20:24

1 Answers1

0

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);
}
Lewis
  • 4,285
  • 1
  • 23
  • 36
  • Christian, Thank you for clarifying this. Of course it can be done with css, I'm just exploring possibilities and learnig JS. I have another code which works fine, but this one which I provided seems to me some kind of "elegant" – arteaster Jul 04 '20 at 20:38
  • @arteaster Yeah, unfortunately there's no (advisable) way to tell jQuery, "hey, watch this element and do X if the element does Y". CSS will let you do that though, and I highly recommend taking that approach. – Lewis Jul 04 '20 at 20:39