Docs

[hrachovec]

Hello:

I’m trying to get a logo to change when you scroll on my site. I’ve been following the feedback on this thread:

https://community.theme.co/forums/topic/different-logo-after-scrolling/

The answer given in answer #312496 seems to have partially worked for me. The problem is the logo doesn’t change back to the first one when I scroll back up. I tried to follow the advice in the thread but it didn’t work, I’m afraid.

My site is here:
http://certeco.co.uk/new/

There’s a blue logo at first, then I want the white transparent version to show if you scroll. If you go back to the top, the blue logo should reappear.

The code in my Custom Javascript section is:

(function($){
 $(window).bind('scroll', function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar .x-brand img').attr('src','http://certeco.co.uk/new/wp-content/uploads/2016/06/Header-Logo.png');
   }else{
     $('.x-navbar .x-brand img').attr('src','http://certeco.co.uk/new/wp-content/uploads/2016/06/certeco-logo-small-01.png');
   }
 });
})(jQuery);

Any suggestions?

Also, is there any way the blue logo can remain a bit longer than immediately after they scroll? For example, could it change after the user scrolls 200 pixels?

Thanks in advance.

Cheers, Russell

[Rahul]

Hi Russell,

Do you have any caching enabled on your website? Please disable and see if that solves it.

If not, please send us your admin credentials in a private reply.

Thanks

[hrachovec]

This reply has been marked as private.

[hrachovec]

This reply has been marked as private.

[Lely]

Hello Russell,

Please update the code to this:

(function($){
 $(window).bind('scroll', function() {
   if ($(this).scrollTop() > 200) { 
     $('.x-navbar .x-brand img').attr('src','http://certeco.co.uk/new/wp-content/uploads/2016/06/certeco-logo-small-01.png');
   }else{
     $('.x-navbar .x-brand img').attr('src','http://certeco.co.uk/new/wp-content/uploads/2016/06/Header-Logo.png');
   }
 });
})(jQuery);

Hope this helps.

[hrachovec]

Yes that’s great, thank you. It worked!

I appreciate your help. 🙂

[Christopher]

You’re welcome.

[Author]

Posts