What I want to know is when the user reaches a certain point on my screen in order to make an animation effect, in this case when the user reaches my footer I would like it to appear in a colorful way and once that went up outside disappearing. although the most important thing is that it appears every time it goes down to the bottom of the page. I do not have a code even though I did not know how to start, I was investigating and I did not find anything that would help my problem.
Detect the movement if ($(window).scrollTop() > 80) now to calculate a certain point of the page you can configure by modifying the value 80 to a certain point of interest.
Here is a practical and simple example with 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> With javascript pure it is as follows:
// 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>