Having trouble with infinite scroll

Question

I've been trying to get this infinite scroll script to work for the past 8 hours and can't figure it out.

I uploaded the site here so you can see the problem: http://kevinellerton.com/meditationmagazine/article01/ as you scroll down, it's supposed to load article04, then 03, then 02, and then stop loading articles since article01 was loaded already. The problem is that it doesn't stop loading them... and if you track the console-logged variables in the console, it's really wonky. I think the problem might have to do with "scope" but I'm not sure :-(

Please help if you can!

Thank you so much!

$(document).ready(function() {

// DATABASE OF ARTICLES
var database = [
    "article04",
    "article03",
    "article02",
    "article01"
];



// THIS WHOLE SECTION CREATES THE INFINITE SCROLL EFFECT BY ACCESSING THE ARTICLES IN ORDER.
// IT'S NOT QUITE WORKING THOUGH.
// IF YOU FIGURE OUT THE BUGS, YOU CAN ACTIVATE INFINITE SCROLL!
// POST CODE ON STACKOVERFLOW... MAYBE YOU'LL GET SOME HELP!

// get initial page name
if (articleCounter == 0) {
    var pathArray = window.location.pathname.split('/');
    var pageName = pathArray[2];
    console.log(pageName);
}

// initialize variables
var win = $(window);
var articleCounter = 0;
console.log(articleCounter);

// Each time the user scrolls
win.scroll(function() {
    // End of the document reached?
    if ($(document).height() - win.height() == win.scrollTop()) {
        $('#loading').show();

        // if this article is the next one in the list, skip it and go to next one
        if (pageName == database[articleCounter]) {
            articleCounter++;
            var nextPage = database[articleCounter];
            pageName = nextPage;
            console.log(nextPage);
        } else {
            var nextPage = database[articleCounter];
            pageName = nextPage;
            console.log(nextPage);
        }

        // append nextPage to the end of the document
        if (nextPage !== undefined) {
            $.ajax({
                url: '../' + nextPage + '/index.php',
                dataType: 'html',
                success: function(html) {
                    $('body').append(html);
                    $('#loading').hide();
                    articleCounter++;
                        console.log(articleCounter);
                    // POSSIBLE TO CHANGE URL PATH NAME HERE???
                }
            });
        }
    }
});
});

EDIT:

I totally re-wrote it today and it's still having the exact same problems. I'm 90% sure that the problem has to do with SCOPE, but I'm not quite figuring it out. Here's my new code that's still not working:

$(document).ready(function() {

// DATABASE OF ARTICLES
var database = [
    "article04",
    "article03",
    "article02",
    "article01"
];

var articleCounter = 0;

// get initial page name
var pathArray = window.location.pathname.split('/');
var initialPage = pathArray[2];
alert("Initial page is " + initialPage);

// when you scroll
$(window).scroll(function() {
    // if you've reached the end of the document
    if ($(document).height() - $(window).height() == $(window).scrollTop()) {
        $('#loading').show();
         // if you've reached the end of the database
        if (articleCounter >= database.length) {
            // load ending footer
            alert("You've reached end of database! articleCounter is " + articleCounter);
            // quit program
        }
        else if (database[articleCounter] == initialPage) {
            articleCounter++;
            appendArticle();
            articleCounter++;
        }
        else {
            appendArticle();
            articleCounter++;
        }
    }
});

// end scroll function

function appendArticle() {
    $.ajax({
        url: '../' + database[articleCounter] + '/index.php',
        dataType: 'html',
        success: function(html) {
            $('body').append(html);
            $('#loading').hide();
            // POSSIBLE TO CHANGE URL PATH NAME HERE???
        }
    });
}

Answer 1

You have defined variable in if statement, that's not ok, and I'll suppose that your logic for getting next page and counter is OK, and btw you commented almost all the code with /* */ so:

$(document).ready(function() {
//you will return to page beginning if no article, so you don't have to include article1

// DATABASE OF ARTICLES
var database = [
    "article04",
    "article03",
    "article02"
];



// initialize variables
var win = $(window);
var articleCounter = 0;
var loaded = true;
// Each time the user scrolls
win.scroll(function() {
    if ($(document).height() - win.height() == win.scrollTop()) {
        if(articleCounter == database.length){
            window.scrollTo(0,0);
            return;
        }

        if(!loaded) return
        $('#loading').show();
        loaded = false;
            $.ajax({
                url: '../' + database[articleCounter] + '/index.php',
                dataType: 'html',
                success: function(html) {
                    $('body').append(html);
                    $('#loading').hide();
                    articleCounter++;
                    loaded = true;
                } 
            });

    }
});


});

Answer 2

$(document).ready(function () {

// DATABASE OF ARTICLES
var database = [
    "article04",
    "article03",
    "article02",
    "article01"
];

var win = $(window);
ArticleLoad_Counter = database.length - 1;// Assuming that article01 is initialy loaded. ie, then we need to load remaing 3 articles.
articleCounter = 0;
var pathArray = window.location.pathname.split('/');
var pageName = pathArray[2];
console.log(pageName);

$(window).scroll(function () {
    if ($(win).scrollTop() + $(window).height() == $(document).height()) {

        // Scroll bar reached at bottom 
        alert("reached bottm");
        if (ArticleLoad_Counter != 0) {
            $('#loading').show();

            if (pageName == database[articleCounter]) {
                articleCounter++;
                nextPage = database[articleCounter];
                pageName = nextPage;
                console.log(nextPage);
                LoadNewArticle(nextPage);  // Function for Ajax Call 

            } else {
                nextPage = database[articleCounter];
                pageName = nextPage;
                console.log(nextPage);
                LoadNewArticle(nextPage); // Function for Ajax call 
            }
        }
    }
});

});

   function LoadNewArticle(nextPage) {
   $.ajax({
    url: '../' + nextPage + '/index.php',
    dataType: 'html',
    success: function (html) {
        $('body').append(html);
        $('#loading').hide();
        ArticleLoad_Counter--;
        alert(nextPage);   // Loaded article name
        console.log(articleCounter);
        // POSSIBLE TO CHANGE URL PATH NAME HERE???
     }
    });

    }

Hope this code will works for your site!!