jQuery scroll show hidden content

Question

How do I make it so that by default, 6 div elements are shown on the page, and when a user scrolls to the bottom of the page, six more are loaded?

If you see this ex

Answer 1

You should be able to use something like the following:

jQuery( window ).scroll( function( ) {
    var loadHeight = jQuery( document ).height( ) - jQuery( window ).height( );
    if( haveDivsToLoad && jQuery( window ).scrollTop( ) >= loadHeight ) {
        // fire your load function here
    }
} );

You might need to play with loadHeight to make it work to your satisfaction.

EDIT: I added haveDivsToLoad to the check. You should make this a global (or closure) variable and set it to true or false depending on whether there are more divs to load.