Jquery ajax infinite scroll exclude footer height

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 ?

You might want to use $('#footer').height(), assuming footer has 'footer' as id might be a better practice considering height might change in future. Instead of 300. — Antariksha, Jun 14 '15 at 21:50

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

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().

edited May 23 '17 at 12:05

Community

1
1

answered Jun 14 '15 at 21:56

Duncan Thacker

4,655
1
7
20

Jquery ajax infinite scroll exclude footer height

1 Answers1