Fading a fixed header when scrolling down using jQuery
Javascript 
Gianluca HTML
<body>
<!-- Static header -->
<header>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</header>
<!-- Hidden div that will becomes the fading (fixed) header -->
<div class="fading-header" style="display:none"></div>
...
</div>
</body>
CSS
#fading-header{
display: none;
position: fixed;
z-index: 1000;
top: 0px;
left: 0;
right: 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
opacity: .95;
}
Javascript
/*
* Shows the fixed header when, scrolling down, the static header disappears
*/
// Clone the header html into the hidden div
$("header").clone().appendTo("#fading-header");
// Get the header height
var headerHeight = $("header").outerHeight();
// Scrolling down it slides down/up the fixed header
$(window).on('scroll', function() {
if ($(this).scrollTop() > headerHeight) {
$("#fading-header").slideDown(); // or fade in with .fadeIn()
} else {
$("#fading-header").slideUp(); // or fade out with .fadeIn
}
});
Andrea 
