fantazer
3/22/2016 - 11:28 AM

Animate header

Animate header

var shrinkHeader = 250;
var heightHeader=$('.header').height();
$(window).scroll(function() {
	var scroll = $(this).scrollTop();
	if ( scroll >= shrinkHeader ) {
			$('body').css('paddingTop',heightHeader);
			$('.header').addClass('shrink');
		}
		else {
				$('body').css('paddingTop',0);
				$('.header').removeClass('shrink');
		}
});

$(window).resize(function(){
	heightHeader=$('.header').height();
});

//Добавялем стили для этого элемента
@-webkit-keyframes slideInDown {
	from {
		transform: translate3d(0, -100%, 0);
		visibility: visible;
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

//Анимация из animateCSs
@keyframes slideInDown {
	from {
		transform: translate3d(0, -100%, 0);
		visibility: visible;
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

.shrink
	position fixed
	top 0
	left 0
	background white
	width 100%
	margin 0
	animation:  slideInDown  1s 1 ease-in-out;