Handling scrolling to the bottom of the page

Now that we've got the first page of videos, we want to add a handler that monitors the window for scroll events and detects when the page has been scrolled right to the bottom.

Engage Thrusters

First of all we need to add a couple of new variables. Change the very first set of variables near the top of the file so that they appear as follows:

var data = {},
    startIndex = 1,
    listHeight = 0,
    win = $(window),
    winHeight = win.height();

Now we need to update our renderer() function so that when the templates have been rendered we update the new listHeight variable. Add the following code after where we render the videoTemplate:

vidList.imagesLoaded(function () {
    listHeight = $("#videoList").height();
});

Next we can add a handler for the scroll event. Directly after the when() method in infinite-scroller.js, add the following code:

win.on("scroll", function () {

    if (win.scrollTop() + winHeight >= listHeight) {
        $("<li...