I have a animated (bootstrap) header with a logo in it. What I need is that when scrolling start the header is getting a lesser height and the logo should become smaller. This is what I have in my CSS:
header
{
background: #222;
transition: all 3s cubic-bezier(0.55, 0, 0.1, 1);
}
.navbar-brand
{
padding: 10px 0;
}
.navbar-brand>img
{
margin: 0 auto;
display: block;
float: left;
transition: all 3s cubic-bezier(0.55, 0, 0.1, 1);
}
header.sticky
{
height: 48px;
line-height: 48px;
position: fixed;
padding-left: 20px;
}
header.sticky .navbar-brand
{
height: auto;
margin: 0;
padding: 0;
}
header.sticky .navbar-brand>img
{
width: 160px; // 45% from the original logo
padding-top: 9px;
}
And the JS function I use:
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
It is working but instead that the the logo is scaling down gradually it is just going from the original size to the header.sticky size. What other approach should I take to make the animation go gradually? Thank you in advance