Cacher is the code snippet organizer for pro developers

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>