1

Lo que quiero es saber en que momento el usuario llega hasta cierto punto de mi pantalla para así poder hacer un efecto de animación, en este caso cuando el usuario llegue a mi pie de pagina quisiera que apareciera de manera vistosa y una vez que subiera fuera despareciendo. aunque lo mas relevante es que aparezca cada vez que baja hasta el pie de pagina. No tengo código aun porque no supe como iniciar, estuve indagando y no encontré nada que ayudara a mi problema.

1
  • 2
    Tip: debes investigar el evento scroll y las propiedades scrollTop Commented el 24 ago. 2016 a las 19:30

2 respuestas 2

4

Detectar el movimiento if ($(window).scrollTop() > 80) ahora para calcular cierto punto de la página puede configurar modificando el valor 80 hasta cierto punto de interés.

Aquí un ejemplo practico y sencillo con jQuery

$(function() {
  $(window).scroll(function() {
if ($(window).scrollTop() > 80) {
  $("#caja-flotante").fadeIn();//.fadeOut();
} else {
  $("#caja-flotante").fadeOut();//.fadeIn();
}
  });
});
#caja-flotante {
  width: 200px;
  height: auto;
  background: red;
  color: white;
  position: fixed;
  top: 0;
  right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="caja-flotante">CAJA FLOTANTE</div>
<div>

Eventos con scroll
Ahora aprenderemos a crear eventos que se lanzan cuando el usuario está haciendo scroll en la página. Las posibilidades son amplias, desde el típico efecto de "Ajax infinity", hasta el botón de "ir hacia arriba" que aparece en muchas páginas cuando comienzas a hacer scroll para abajo, o animaciones Paralax que se ejecutan cuando lleguamos a un punto del documento, de modo que ocurran cosas como mostrar elementos, ocultarlos, moverlos, etc.

El evento que debemos usar es "scroll". Fácil de memorizar. Si queremos asociar eventos al movimiento de la página completa, lo asociamos al objeto window o document (una vez extendido con jQuery). Lógicamente, si lo que queremos es producir eventos cuando el scroll se realiza sobre un elemento, asociaremos el evento "scroll" sobre ese elemento.

En este ejemplo vamos a definir un evento scroll para que, cuando se desplace la página hacia abajo, aparezca una caja con un enlace que nos permita ir hacia arriba. La caja se supone que está ya en el DOM de la página, en un elemento con el id="irarriba".

Es muy sencillo y el código lo tienes comentado para entenderlo mejor. Ahora te preguntarás, cómo hacer para que el control #irarriba nos lleve verdaderamente hasta la parte de arriba de la página. Eso ya lo podrás imaginar, pues es una animación de desplazamiento, que hemos visto en el anterior punto.

Con esto hemos repasado más o menos todos los casos prácticos donde podemos necesitar controlar el scroll de la página o de los elementos. No deberías tener problemas para reproducir por ti mismo un ejemplo completo donde se realicen desplazamientos o eventos de desplazamiento.

De todos modos, te dejamos el código completo de un ejemplo para que lo pongas en marcha tú mismo.

Una de las facetas típicas donde podemos sacar un buen partido de jQuery es trabajando con las propiedades de scroll de la ventana o los elementos. Para realización de interfaces de usuario y para la interacción con el cliente es interesante poder detectar el scroll actual, así como realizar eventos y animaciones con scroll.

Todo eso lo veremos en este taller de jQuery por medio de sencillos ejemplos que nos permitrán implementar comportamientos típicos. Yendo un poco más allá, estas técnicas que presentaremos son las mismas que utilizarías para un efecto de Paralax.


Detección del scroll actual
Lo primero que aprenderemos es a detectar la cantidad de scroll que se ha realizado sobre la página entera. En jQuery existe un método para obtener el valor del scroll actual en la vertical y otro para la horizontal: scrollTop() y scrollLeft(). No reciben ningún valor, simplemente devuelven la cantidad de píxels de desplazamiento.

Si quieres saber el desplazamiento de la página entera en un momento dado, invocas a estos métodos a partir del objeto document extendido con jQuery.

</div>

3
  • 3
    Faltaría aclarar que esta solución usa jQuery pues la pregunta no esta etiquetada como tal. saludos. Commented el 24 ago. 2016 a las 21:08
  • @rnd espero no sea tarde la edición explicando el ejemplo utilizando jQuery. Saludos.
    – Otto
    Commented el 24 ago. 2016 a las 23:44
  • Creo que tiene mucho valor tomarnos el tiempo para mejorarnos como comunicadores. Yo por mi parte vengo aprendiendo y quise compartir mis impresiones. Editar es un amigo. Saludos! Commented el 24 ago. 2016 a las 23:49
3

Con javascript puro es de la siguiente manera:

// Detectamos cuando el usuario desplace la pantalla
window.onscroll = function (){
    // Obtenemos la posicion del scroll en pantall
    var scroll = document.documentElement.scrollTop || document.body.scrollTop;

    // Realizamos alguna accion cuando el scroll este entre la posicion 300 y 400
    if(scroll > 300 && scroll < 400){
        console.log("Pasaste la posicion 300 del scroll");
    }
}
<body style="height: 2000px;  margin: 0px;">
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.