How to change logo on scroll

[Mastres]

Hi, a time ago you gave me a js code to change my header logo on scroll, after several updates i think that classes have change and i can’t make work again. Can you help me, please?

this is the website https://www.balandrovinos.com/

and this the code
jQuery(function($) {
$( window ).scroll(function() {
if($(this).scrollTop() >= 48) {
$(’.hm1.x-bar .hm5.x-image img’).attr(‘src’,‘http://www.balandrovinos.com/wp-content/uploads/2017/06/logotipo-balandro.png’);
$(’.hm1.x-bar .hm5.x-image’).css(‘margin’,‘0 80px’);
$(’.hm1.x-bar .hm5.x-image img’).css(‘width’,‘171px’);
}else {
$(’.hm1.x-bar .hm5.x-image img’).attr(‘src’,‘http://www.balandrovinos.com/wp-content/uploads/2017/05/imagotipo-balandro.png’);
$(’.hm1.x-bar .hm5.x-image’).css(‘margin’,‘115px 40px 60px 40px’);
$(’.hm1.x-bar .hm5.x-image img’).css(‘width’,‘87px’);
}
});
});

[jrhager84]

I was gonna help you out, but it seems your age-checker is also broken. No matter the age, it says ‘you must be 18.’

[Mastres]

Hi, i have update the plugin, try again please.

[jrhager84]

Still not letting me in, saying I have to be over 18. No number above 18 works that I’ve tried

[jrhager84]

The best way (in my opinion) of doing all of this logic is to just have a base class, and an ‘active/whatever’ class. That way, you’re not setting all of the CSS properties in JS. You can easily reposition things in the CSS and not have to worry about touching the JS. Then, with jQuery you just do a toggleClass(element) on whichever element is in the scroll event, and it’ll add/remove the class, thereby changing the styling. I tried in another browser and was able to get in, but it looks like your header image is messed up (unless you want it outside of the navbar like that).

[Mastres]

Ok, thanks i will try

[nabeel]

Hi @Mastres,

Thank you for reaching out to us. Since you’re using Pro, you don’t need custom coding. First I’d recommend you to remove the code and let’s achieve this within the header builder.

First you need to create two bars, each with different logos in it, simply duplicate your first Bar and change the logo in it.

Inspect your first Bar and turn off the Sticky Bar option:

Inspect your second Bar, turn on the Hide Initially option and also turn on the Sticky Bar option (see screenshot)

This will give you the on-scroll changing logo effect. Cheers!

[Mastres]

Thanks!! works great!!

[jade]

You’re most welcome, @Mastres.