Make a div move out of screen (top) on scroll down

I want to create an effect like the header of this site: Tigre Blanc

My code goes like this:

<div id="header">                                 <center><div class="menubutton" onclick="openNav()"><img src="assets/images/openmenu.png" style="width:6%"></div></center>                    </div>

I have no idea which functions can make it move out of the screen like this. I guess the kind of js code to make it start but can't figure out the animation to use.

Js:

$(window).scroll(function(){$(".header").css("opacity", 1 - $(window).scrollTop() / 250);});/*win.scroll(function(){scrollPosition = win.scrollTop();scrollRatio = 1 - scrollPosition / 300;$(".header").css("opacity", scrollRatio);*//*$(window).scroll(function(){var scrollVar = $(window).scrollTop();$('.header').css("opacity", 1 - scrollVar/300);})*/