<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de carga del contenido de la pagina a medida que baja el scroll del navegador</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){ var count=0;
// evento que se ejecuta cuando se mueve el scroll de la pagina
$(document).scroll(function(){
// si esl scroll de la pagina mas la altura es superior
// a la altura del documento
if($(document).scrollTop()+$(window).height()>=$(document).height())
{ // Aqui podria ir una función ajax para cargar el contenido
// de base de datos o de PHP...
count+=1;
// añadimos al final de la página unas lineas de ejemplo
$("body").append("<p>Linea añadida desde javascript</p><p>Linea añadida desde javascript</p><p>Linea añadida desde javascript "+count+"</p>"); }
});
});
</script>
</head>
<body>
<h1>Ejemplo de carga del contenido de la pagina a medida que baja el scroll del navegador</h1>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
</body>
</html>
