Al pulsar sobre un enlace, las capas de colores inferiores deben filtrarse en función del enlace pulsado. Para ello, recorreremos todas las capas, añadiendo o eliminando el class «oculta» en el caso de que el href (con #) del enlace coincida con alguno de los class de la capa
Utilizaremos el siguiente código CSS:
.oculta{
overflow:hidden;
animation: ocultar 0.5s;
animation-fill-mode: forwards
}
@keyframes ocultar{
to{
width: 0;
height: 0;
margin: 0;
border:0;
}
}Menús
Menú que desaparece al hacer scroll down
var $mywindow = $(window);
var mypos = $mywindow.scrollTop();
$mywindow.scroll(function() {
if($mywindow.scrollTop() > mypos){
$('.site-header').fadeOut();
}else{
$('.site-header').fadeIn();
}
mypos = $mywindow.scrollTop();
});Ejercicio – Menú que se solapa arriba
$(window).scroll(function(){
});
var scrollTop = $(window).scrollTop();
distanciaInicial = $('.nav').offset().top;
//Si scrollTop es mayor que la distancia inicial añado un class para pegar el menú arriba