Sticky position with jQuery
-
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.
-
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 -
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.
<script>
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> -
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 -
Hi @raphael75011 does it work for you ?
I'm using the same jQuery function and to change the $ to jQuery doesnt seems to change anything. -
Dear @Sophie1000
Am i correct from your recent Thread this is solved?
http://laythemeforum.com:4567/topic/6672/sticky-element?_=1616638900292
Best wishes
Richard
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it