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!