Sticky position with jQuery

raphael75011

Re: Text Element Sticky: stick to top on scroll

Hello,

I am using a javascript fonction that I found on the forum to
use a sticky position on a block of text. It is working but not totally. When you scroll up there is a bug, as you can see here: http://wcnhxpk.cluster028.hosting.ovh.net/projet-1
Do you have a solution to fix it?
Thank you so much,

Raphaël.

Richard K

Dear @raphael75011

I believe i can see it :)
but just to be correct it is obviously because it jumps right?

The Class "Sticky" is only being added when you leave the top of the page, something about it being completely '0' to the top causes the problem but as soon as move - it kicks into action!

Is there anything in your Javascript you can see at first glance that could be causing this? or any Solution you see easily?

Best wishes and thank you for using Lay Theme

Sincerely
Richard

raphael75011

Hi @Richard-Keith

Thanks for your kind answer. I have some notion of html/css unfortunately I don't know how to write javascript. Here is the function, maybe you know more than me.
Best,

Raphaël.

jQuery(document).ready(function($) {

function sticky()
{
    var window_top=$(window).scrollTop();
    var top_position=$('body').offset().top;
    var element_to_stick=$('#header');
    
    if (window_top > top_position) {
        element_to_stick.addClass('sticky');
    } else {
        element_to_stick.removeClass('sticky');
    }
}
$(window).scroll(sticky);
sticky();

});
</script>

Richard K

Dear @raphael75011

Hi Raphael sorry for the late reply

Do you still need help with your problem?
Remember when using JS that we have to change the " $ " to " jQuery "

Thank you for your patience and apologies once again

Sincerely
Richard