Header animat on scroll window

In acest scurt articol vreau sa va arat cum am realizat cu aceste coduri simple dar eficiente un header animat atunci cand dai de scroll in jos pe un site. In primul rand identifici care sunt clasele din partea de sus a site-ului care doresti sa le fixezi la ascroll on window. Deasupra acestor clase se pune un id cu orice nume doriti, eu am ales sa il numesc fixed.

Exemplu:

<div id="fixed" class="nofix">
   <header>
      <div class="logo">LOGO</div>
	  <nav>Meniu</nav>
   </header>
</div>

Pentru partea de jQuery am folosit urmatoarele coduri (trebuie incarca in site libraria jQuery):

jQuery(function() {
    var header = jQuery("#fixed");
    jQuery(window).scroll(function() {
        var scroll = jQuery(window).scrollTop();

        if (scroll >= 400) {
            header.removeClass('nofix').addClass("fix");
        } else {
            header.removeClass("fix").addClass('nofix');
        }
    });
});

Pentru partea de animatie sa realizat urmatoarea declaratie: animation: smoothScroll 1s forwards;

@keyframes smoothScroll {
	0% {
		transform: translateY(-40px);
	}
	100% {
		transform: translateY(0px);
	}
}

Partea finala de css arata asa:

#fixed {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}
.fix {
    width: 100%;
    height: 150px;
    display: block;
    position: fixed!important;
    z-index: 99999;
    animation: smoothScroll 1s forwards;
}

@keyframes smoothScroll {
	0% {
		transform: translateY(-40px);
	}
	100% {
		transform: translateY(0px);
	}
}

Daca aveti nelamuriri puteti intreba in sectiunea de comentarii.

Demo