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

7836
Visitas

0
Resp

Por alber hace 8 años

Admin