Jquery/ajax infinite scrolling

[TechnoDiver]

Hi Freaks, I've been working on an issue trying to get an infinite scrolling system to work. I originally posted about it here ->

I've been trying to debug and figure out the issue as I was pretty sure it was in the jquery/ajax script and not my PHP. The original script I'm using is in the original post linked above bur for reader convenience I'll post it again here ->

<script>
var userLoggedIn = '<?php echo $user->data()->username; ?>';

$(document).ready(function() {

    $('#loading').show();

    //ajax for loading first posts
    $.ajax({
        url: "includes/handlers/ajax_load_posts.php",
        type: "POST",
        data: "page=1&userLoggedIn=" + userLoggedIn,
        cache: false, 

        success: function(data) {
            $('#loading').hide();
            $('.posts_area').html(data);
        }
    });

    $(window).scroll(function() {
        var height = $('.posts_area').height(); //div containing posts
        var scroll_top = $(this).scrollTop();
        var page = $('.posts_area').find('.nextPage').val();
        var noMorePosts = $('.posts_area').find('.noMorePosts').val();

        if ((document.body.scrollHeight == document.body.scrollTop + window.innerHeight) && noMorePosts == 'false') {
            $('#loading').show();

            var ajaxReq = $.ajax({
                url: "includes/handlers/ajax_load_posts.php",
                type: "POST",
                data: "page=" + page + "&userLoggedIn=" + userLoggedIn,
                cache: false, 

                success: function(response) {

                    $('.posts_area').find('.nextPage').remove(); //removes current next page
                    $('.posts_area').find('.noMorePosts').remove(); //removes current next page
                    $('#loading').hide();
                    $('.posts_area').append(response);
                }

            });

        } // end if

        return false;
    });

});

</script>

the issue that I found is in the if statement condition->

if ((document.body.scrollHeight == document.body.scrollTop + window.innerHeight) && noMorePosts == 'false') {

I added some console logs->

....

console.log("This is the scrollHeight: " + document.body.scrollHeight);
console.log("This is the scrollTop: " + document.body.scrollTop);
console.log("");
console.log("This is scrollTop + innerHeight: " + (document.body.scrollTop + window.innerHeight));
console.log("");

if((document.body.scrollTop + window.innerHeight >= 2500) && noMorePosts == 'false') {
    $('#loading').show();
    console.log('This is fucked up');
    // noMorePosts = true;

.......

And it turns out that the overflow comments were being displayed but I had to scroll alll the way to the bottom of the page for it to happen. In the above code you can see where I altered the if condition to get the overflow comments to display sooner. This seems like a really bad fix to me as it's such an absolute value (2500) and doesn't take into account so many different variables in user system, setup etc etc.

Also, at times it will load the overflow comments more than once. I've seen them repeated up to 3-4 times, which is certainly not acceptable.

So I have 2 questions about this issue that I'm really hoping someone can help me resolve:

1) What is a more appropriate fix for the if condition rather than having that hardcoded 2500 in there?

2) What are some ways I can fix the sometimes repetitive overflow comments displaying?

As I said in my original post, this jquery/ajax isn't my code and I'm trying to work through it when I get the time, but there is no mechanism in it to make noMorePosts = true and my commented out attempt at it didn't work. To say that I'm really uncomfortable with jquery and ajax would be an understatement.

I look forward to reading your responses and hope a great weekend to you all. TIA