Hacer un filtro

Contactar con el profesor

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
← Bucle en jQuery
text() y html() →

Aviso Legal | Política de privacidad