Edit in JSFiddle

$(window).scroll(function () { 
	$(this).scrollTop() < 100 ?
        $('header').removeClass('hidden'):
		$('header').addClass('hidden');
});

External resources loaded into this fiddle:

<header>
I'm a HEADER
</header>

<section class="main">
	<ul>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
		<li> line </li>
</section>
* { 
	margin: 0;
}
header {
	background: black;
	color: white;
	padding: 20px;
	position:fixed;
	width: 100%;
    transition: all 0.8s ease-in;
}
header.hidden {
	opacity: 0.1;
    transition: all 0.8s ease-out;
}

section.main {
	background: #fff;
    font-size: 3em;
}