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

Question

我正在研究ajax无限滚动。我有以下代码在结束滚动后发出ajax请求，

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

但是当它滚动到最后（包括页脚）时会触发。但是当页脚在滚动时开始显示时，我希望它被触发（页脚高度为300px）。

我研究并尝试了以下代码，

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

但它似乎很脏。滚动时，函数会被触发太多次。任何好的解决方案？

Answer 1

当您的页脚元素首次滚动到视图中时，我会采用触发行为的方法。

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

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

请参阅Check if element is visible after scrolling以获取isScrolledIntoView()的代码。