Question

I have a little script that allows my users to receive new items without reloading a page or make use of pagination.

I have a pretty big footer with some information and currently this script only loads when the user reaches the bottom of the page.

Is there anyway you can make it so if the user is 90% down the page, the function starts?

Here is my current script:

<script type="text/javascript">
    alreadyloading = false;
    start = 20;
    stop = 30;
     
    $(window).scroll(function() {
        if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
            if (alreadyloading == false) {
                alreadyloading = true;
                $('.last').show();
                $.ajax({
                    type: "GET",
                    url: "/trophy-room/all/",
                    data: "start="+start+"&stop="+stop,
                    success: function(data) {
                        $(data).insertBefore('.last');
                        start = stop;
                        stop = stop + 10;
                        $('.last').hide();
                        alreadyloading = false;
                    }
                });
                // if you reach bottom, send 10 as begging and 20 as stop
                // load the data and insert before div last or something. [5:10]
            }
        }
    });
</script>

Answer 1

Super simple. Just multiple $('body').height() by 0.9.

<script type="text/javascript">
    alreadyloading = false;
    start = 20;
    stop = 30;

    $(window).scroll(function() {
        if (($(window).scrollTop + $(window).height()) >= ($('body').height() * 0.9)) {
            if (alreadyloading == false) {
                alreadyloading = true;
                $('.last').show();
                $.ajax({
                    type: "GET",
                    url: "/trophy-room/all/",
                    data: "start="+start+"&stop="+stop,
                    success: function(data) {
                        $(data).insertBefore('.last');
                        start = stop;
                        stop = stop + 10;
                        $('.last').hide();
                        alreadyloading = false;
                    }
                });
                // if you reach bottom, send 10 as begging and 20 as stop
                // load the data and insert before div last or something. [5:10]
            }
        }
    });
</script>