Curso de jQuery | Hacer un filtro

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

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

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.