Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Ejecutar función o acción al hacer scroll hacia abajo

3_88_funcion-scroll
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
0
Resp
496
Visitas
Por alber hace 10 meses
Administrador offline

Relaccionados

Para comentar Inicia sesión o Registrate