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;