Menú con transición al hacer scroll con css

Ejemplo de como hacer un menú con transición al hacer scroll con css fácil, a continuación tenemos un código de ejemplo y una demo en funcionamiento.

Importante saber que es necesario usar jquery para hacerlo con este método sencillo, ahora la función principal:

$(window).scroll(function(){
	//al hacer scroll hacia abajo agregamos la clase con transición
if($(this).scrollTop() > 0) {
	$('header').addClass('menu-scroll');
	//al llegar arriba la removemos
}  else {
	$('header').removeClass('menu-scroll');
	
} 
});

el código completo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>

$(window).scroll(function(){
	//al hacer scroll hacia abajo agregamos la clase con transición
if($(this).scrollTop() > 0) {
	$('header').addClass('menu-scroll');
	//al llegar arriba la removemos
}  else {
	$('header').removeClass('menu-scroll');
	
} 
});

</script>


<style>
body {
	min-height: 2000px;
}
header {
	width: 200px;
    background: #ddd;
    position: fixed;
    left: 50%;
    right: 50%;
    margin-top: 40px;
    -webkit-transition: 0.2s !important;
    -o-transition: 0.2s !important;
    transition: 0.2s !important;
}
	.menu {
		padding: 0;
		margin: 0 auto;
	}
	.menu li {
		float: left;
		list-style: none;
	}
	.menu li a {
		text-decoration: none;
		padding: 10px;
	}
	.menu-scroll {
	margin-top: 0;
    -webkit-transition: 0.2s !important;
    -o-transition: 0.2s !important;
    transition: 0.2s !important;

	}
</style>


<header>
	<ul class="menu">
		<li><a href="">ITEM</a></li>
		<li><a href="">ITEM</a></li>
	</ul>
</header>

demo
Editado