I'm currently tackling the challenge of implementing ajax infinite scroll. I have the following code in place to trigger an ajax request once scrolling reaches the end:
$(window).scroll(function(){
if($(window).scrollTop() >= ($(document).height() - $(window).height())){
loadlist();
}
});
However, the issue I'm facing is that it fires when scrolled all the way to the end (including the footer). What I actually want is for it to trigger when the footer is just starting to appear while scrolling (considering the footer height is 300px).
I did some research and attempted the following solution:
$(window).scroll(function(){
if($(window).scrollTop() >= ($(document).height() - $(window).height()) - 300){ // accounting for 300px footer height
loadlist();
}
});
Despite this workaround, it doesn't seem quite right as the function gets called too frequently during scrolling. Are there any better alternatives or solutions available?