load on scroll

by freedawirl

HTML

<div id="container">
    <div class="loadedcontent">Content 1</div>
    <div class="loadedcontent">Content 2</div>
    <div class="loadedcontent">Content 3</div>
    <div class="loadedcontent">Content 4</div>
    <div class="loadedcontent">Content 5</div>
    <div class="loadedcontent">Content 6</div>
    <div class="loadedcontent">Content 7</div>
</div>

CSS

.loadedcontent {
    min-height: 1200px;
}

JavaScript

var processing;

$(document).ready(function () {

    $(document).scroll(function (e) {

        if (processing) return false;

        if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.7) {
            processing = true;
            $.post('/echo/html/', 'html=<div class="loadedcontent">new div</div>', function (data) {
                $('#container').append(data);
                processing = false;
            });
        }
    });
});