Foros del Web » Programando para Internet » Jquery »

Animate en jQuery al alcanzar la parte baja de una capa.

Estas en el tema de Animate en jQuery al alcanzar la parte baja de una capa. en el foro de Jquery en Foros del Web. Buenas compañeros! Ando a vueltas con un asunto muy sencillo y que he visto en múltiples páginas web, también he buscado en StackOverflow pero no ...
  #1 (permalink)  
Antiguo 15/08/2018, 12:54
Avatar de RAZGRIZ24  
Fecha de Ingreso: septiembre-2009
Mensajes: 143
Antigüedad: 9 años
Puntos: 2
Animate en jQuery al alcanzar la parte baja de una capa.

Buenas compañeros!

Ando a vueltas con un asunto muy sencillo y que he visto en múltiples páginas web, también he buscado en StackOverflow pero no termino de encontrar solución, el asunto es muy sencillo; tengo un header y un vídeo de fondo.

Mi objetivo, es que cuándo el bottom del header toque la parte baja del vídeo, el fondo del header cambie de color mediante animate, pero no lo consigo.

Os pongo el código que tengo:

Código HTML:
<header class="vanish-header">
	        <div class="div-logo">
	            <img src="index-files/logo-white.png" />
	        </div>
	        <div class="nav-buttons-wrapper">
	            <ul class="headernav-ul">
	                <a href="#"><li>Inicio</li></a>
	                <a href="#"><li>Currículum</li></a>
	                <a href="#"><li>Habilidades</li></a>
	                <a href="#"><li>Galería</li></a>
	                <a href="#"><li>Coaching</li></a>
	                <a href="#"><li class="li-contacto">Contacto</li></a>
	            </ul>
	        </div>
    </header> 
css:

Código:
.vanish-header{
	background: rgba (0,0,0,0);
}
jQuery:

Código:
$(document).ready(function() {
    
    $(window).scroll( function(){
    
        $('.vanish-header').each( function(i){
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_video = $('#video').offset().bottom;

            if( bottom_of_object = bottom_of_video ){
                
                $(this).animate{('background','rgba(0,0,0,0.7)'}, 500);
                    
            }
            
        }); 
    
    });
    
});
A ver si me podéis echar una mano, compañeros!

Gracias!
  #2 (permalink)  
Antiguo 15/08/2018, 17:54
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.413
Antigüedad: 6 años, 10 meses
Puntos: 926
Respuesta: Animate en jQuery al alcanzar la parte baja de una capa.

Podrías probar cambiando esto:

Código Javascript:
Ver original
  1. if ( bottom_of_object = bottom_of_video ){

Por esto:

Código Javascript:
Ver original
  1. if ( bottom_of_object == bottom_of_video ){

Lo primero es una asignación; lo segundo, una comparación.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #3 (permalink)  
Antiguo 16/08/2018, 03:45
Avatar de RAZGRIZ24  
Fecha de Ingreso: septiembre-2009
Mensajes: 143
Antigüedad: 9 años
Puntos: 2
Respuesta: Animate en jQuery al alcanzar la parte baja de una capa.

Cita:
Iniciado por Alexis88 Ver Mensaje
Podrías probar cambiando esto:

Código Javascript:
Ver original
  1. if ( bottom_of_object = bottom_of_video ){

Por esto:

Código Javascript:
Ver original
  1. if ( bottom_of_object == bottom_of_video ){

Lo primero es una asignación; lo segundo, una comparación.


Muchas gracias compañero! No me había dado cuenta de eso.

Aún así sigue sin funcionar, voy a seguir un rato con más cositas del diseño y cuándo me despeje de eso vuelvo, que si no me arde la cabeza

A ver si se nos ocurre alguna otra cosa
  #4 (permalink)  
Antiguo 16/08/2018, 22:11
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.103
Antigüedad: 10 años, 6 meses
Puntos: 994
Respuesta: Animate en jQuery al alcanzar la parte baja de una capa.

Tu codigo tiene un parecido a este que yo utilizo para animar la entrada de elementos, dale un vistazo quizas te de algunas ideas.

__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....



La zona horaria es GMT -6. Ahora son las 16:15.