section.navbar {
transition: all, 0.4s, ease;
position: fixed;
top: 0;
z-index: 9999;
width: 100%;
padding: 25px;
background: #6084ac;
border-bottom: 1px solid #e1e1e1;
img {
transition: all, 0.4s, ease;
height: 75px;
}
&.shrink {
padding: 10px 25px;
img {
height: 50px;
}
}
}
main {
margin-top: 135px;
}
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 100 ) {
$('section.navbar').addClass('shrink');
}
if (scroll <= 0 ) {
$('section.navbar').removeClass('shrink');
}
});
<section class="navbar">
<div class="wrapper">
<img src="logo.png">
</div>
</section>
<main></main>