Sticky logo

[Jacqui]

I’m coding a sticky header using this code:

jQuery(function($) {
$(window).scroll(function() {
if(window.scrollY === 0) {
$(’.x-navbar .x-brand img’).attr(‘src’, ‘http://test.unknowndesign.co.za/wp-content/uploads/2018/02/UNKNOWN.svg’);
}
else
{
if ($(’.x-navbar’).hasClass(‘x-navbar-fixed-top’)) {
$(’.x-navbar-fixed-top .x-brand img’).attr(‘src’, ‘http://test.unknowndesign.co.za/wp-content/uploads/2018/02/U.svg’);
} else {
$(’.x-navbar .x-brand img’).attr(‘src’, ‘http://test.unknowndesign.co.za/wp-content/uploads/2018/02/UNKNOWN.svg’);
}
}
});
});

The code seems to have a delay and the sticky logo doesn’t transition smoothly. How can I give it a smooth transition without a delay?

[paul.r]

Hi,

Please change your js code to this.

jQuery(function($) {
$(window).scroll(function() {
   if(window.scrollY === 0) {
        $('.x-navbar .x-brand img').attr('src', 'http://test.unknowndesign.co.za/wp-content/uploads/2018/02/UNKNOWN.svg');
    }  
    else
    {
        $('.x-navbar  .x-brand img').attr('src', 'http://test.unknowndesign.co.za/wp-content/uploads/2018/02/U.svg');
    }
});
});

Hope that helps.

[Jacqui]

Perfect! Thank you

[Jacqui]

Can I give it a transition effect, like for it to ease out at 0.3s instead of just disappearing off the page?

[basanta]

Hi There,

Thanks for writing in!

Please add this css to your global css and let us know how this goes.

.x-brand img {
-webkit-transition: 0.3s; /* Safari */
    transition:  0.3s;
}

Hope this helps.

Thanks

[Jacqui]

This doesn’t make a difference, the logo image still just disappears

[nabeel]

Hi again,

Since you’re changing the Image src with jQuery, any sort of CSS transition won’t work in this case, this thread will help you in this situation https://stackoverflow.com/questions/23583245/add-transition-while-changing-img-src-with-javascript

Hope this helps!