It's interesting how the sticky widget performs differently on long articles compared to short ones on my website. Here is an example of a long article where the sticky widget works well without any lag: .
Now, let's take a look at a shorter article. In shorter articles, I encounter issues with scrolling to the bottom as the sticky widget lags and hinders smooth navigation: .
Below is the code snippet for the sticky widget:
$(function(){ // document ready
if ($('#HTML4').length) { // ensure "#sticky" element exists
var el = $('#HTML4&##39;);
var stickyTop = $('#HTML4').offset().top; // returns numeric value
var stickyHeight = $('#HTML4').height();
$(window).scroll(function(){ // scroll event
var limit = $('#copyrights').offset().top - stickyHeight - 600;
var windowTop = $(window).scrollTop(); // returns numeric value
if (windowTop > stickyTop) {
el.css({ position: 'fixed', top: 25 });
}
else {
el.css('position','static');
}
if (windowTop > limit) {
var diff = limit - windowTop;
el.css({top: diff});
}
});
}
});
I might not be a professional programmer, but perhaps the solution to this issue is simpler than it seems.