Ejecutar función o acción al hacer scroll hacia abajo
Vamos a hacer un pequeño tutorial pasa saber como ejecutar una función al hacer scroll en la pagina, en ejemplo podemos ver como ejecutar la acción cuando llegamos al pie de pagina es decir al llegar con el scroll hasta abajo ejecutamos la función.
Voy a dejaros el concepto básico de como funciona y después una demo funcional para que podáis probarlo, vamos primero con el ejemplo básico, recordar que para que funcione hay que usar jquery:
$(window).scroll(function() { if($(window).scrollTop() + $(window).height() >= $(document).height()) { //Al llegar al pie de la pagina se ejecuta console.log('Hola mundo!'); } });Ahora vamos con un ejemplo funcional:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Scroll</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <style> body { font-family: sans-serif; min-height: 1500px; } .res { margin-top: 1300px; } h2 { padding: 8px; background: #cfecd3; border: 1px solid #0cd828; } </style> </head> <body> <h1>Hacer scroll hacia abajo para probar</h1> <div id="res"></div> </body> </html> <script> $(window).scroll(function() { if($(window).scrollTop() + $(window).height() >= $(document).height()) { //Al llegar al pie de la pagina se ejecuta $('#res').append('<div class="res"><h2>Hola me estoy multiplicando cada vez que llegas al final de la pagina!</h2></div>'); } }); </script>Demo
Editado
1
Puntos
Puntos
7915
Visitas
Visitas
0
Resp
Resp
Por alber hace 85 meses
Administrador