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

[RAZGRIZ24]

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!

[Alexis88]

Podrías probar cambiando esto:

Código Javascript:

if ( bottom_of_object = bottom_of_video ){
 

Por esto:

Código Javascript:

if ( bottom_of_object == bottom_of_video ){
 

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

[RAZGRIZ24]

Iniciado por Alexis88

Podrías probar cambiando esto:

Código Javascript:

if ( bottom_of_object = bottom_of_video ){
 

Por esto:

Código Javascript:

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

[ArturoGallegos]

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