Is there a Javascript event that triggers when an HTML element scrolls into view?

dom, html, javascript, jquery

Solution

I think jQuery way points is the plugin you might need:

http://imakewebthings.com/jquery-waypoints/

Below is how you can call a waypoint plugin:

$(document).ready(function() {
    var $loading = $("<div class='loading'><p>Loading more items&hellip;</p></div>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('body').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.article'));
            $loading.detach();
            $('.more').replaceWith($data.find('.more'));
            $footer.waypoint(opts);
        });
    }, opts);
});

Problem

I want to load elements as they scroll into view to reduce server load e.g. thumbnails, but would like their placeholder `divs` to exist from when the page loads. To do this, I think I need a trigger of some kind when the `div` becomes visible. jquery-appear was suggested but I cannot seem to get a copy of it from anywhere (Google gives me a 403 error) Does anyone know how else to do this?

Original source