"Infinite scroll"-like. Make it fire before bottom

Question

I'm using this small script to define if the user've scrolled to the bottom

$(window).scroll(function(){

    if($(window).scrollTop() == $(document).height() - $(window).height()){
        if(!taskFired){
            taskFired = true;
            $("#loading_gif").css("display", "block");
            setTimeout(loadMoreMabs, 1500);
        }
    }

});

But I wan't it to fire the function loadMoreMabs before the bottom is reached. How would I do that? I've tried to + and - with the heights, but it's like I'm experimenting with something I don't really get.

Answer 1

What your question title suggests you want

Subtract a value from $(document).height() something like 50 to start loading 50 pixels from the bottom.

if($(window).scrollTop() <= ($(document).height() - 50) - $(window).height()){

Here is a little demo in jsfiddle, I made a dummy function to fulfill the loadMoreMabs function

http://jsfiddle.net/sg3s/UwXaw/

Fires every time you are near the bottom and the 1500ms expire.

Now to make it fire (immediatly) ONLY if it reaches the very bottom.

(since it actually suggests something else)

http://jsfiddle.net/sg3s/UwXaw/1/

The trick is probably the >= in the equation, making sure it fires if the scrollTop is the same or HIGHER than the document minus the window height...