0En este Tutoriales en linea les mostraremos como mostrar elementos al hacer scroll con jQuery o mejor dicho ejecutar alguna función o acción al hacer scroll en la pagina.
Pequeño ejemplo de como ejecutar una función al detectar que se a subido el scroll hacia arriba, en este caso se ejecuta cuando el scroll esta arriba del todo es decir en la posición 0 y usamos jquery ya que simplifica las acciones de jаvascript:
//Ejecutar función al subir
$('.mensajes').scroll(function() {
if ($(this).scrollTop()==0){
//Ejecutar función
alert('Top!!');
}
});Ejemplo funcional
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mostrar elementos al hacer scroll con jQuery</title>
</head>
<body>
<script src="/engine/classes/min/index.php?g=general3"></script>
<style>
.mensajes {
height: 120px;
width: 100px;
overflow: auto;
}
</style>
<div class="mensajes">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
</div>
<script>
//Bajar scroll al inicio
$('.mensajes').scrollTop(1000);
//Ejecutar función al subir
$('.mensajes').scroll(function() {
if ($(this).scrollTop()==0){
//Ejecutar función
alert('Top!!');
}
});
</script>
</body>
</html>
Otro ejemplo para ejecutar la acción cuando llegamos al pie de pagina es decir al llegar con el scroll hasta abajo ejecutamos la función o elemento.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
//Al llegar al pie de la pagina se ejecuta
console.log('Hola mundo!');
}
});Ejemplo funcional
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mostrar elementos al hacer scroll con jQuery</title>
</head>
<body>
<script src="/engine/classes/min/index.php?g=general3"></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>
<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>
</body>
</html>
Comentarios