jQuery ajax无限滚动排除页脚高度

Question

I'm working on ajax infinite scroll. I have below code to make ajax request after scrolling at end,

$(window).scroll(function(){
if($(window).scrollTop() >= ($(document).height() - $(window).height())){
    loadlist();
}
});

But it fires when scrolled at end (including footer.). But I want it fired when the footer is just starting to show while scrolling (footer height is 300px).

I researched and tried following code,

$(window).scroll(function(){
if($(window).scrollTop() >= ($(document).height() - $(window).height()) - 300){ // 300px footer height
    loadlist();
}
});

But It seems dirty. the function gets fired too many times when scrolling. any good solutions ?

Answer 1

I'd take the approach of triggering the behaviour when your footer element first scrolls into view.

var $footer = $("#my-footer");

$(window).scroll( function() {
    if (isScrolledIntoView($footer) ) loadList();
});

See Check if element is visible after scrolling to get the code for isScrolledIntoView() .