body {height: 100%}
<div class="header">
<div class="header-logo"></div>
</div>
<div class="menu">
<a href="#" class="menu-item">Menu 1</a>
<a href="#" class="menu-item">Menu 2</a>
</div>
<div class="content">
<div class="article">
...
</div>
</div>
<div class="footer">
...
</div>
var show = false;
var $nav = $("nav");
function showFixed() {
if (show) {
return;
}
show = true;
$nav.hide().addClass("nav-fixed").slideDown();
}
function hideFixed() {
if (!show) {
return;
}
show = false;
$nav.slideUp(function() {
$nav.removeClass("nav-fixed").slideDown();
});
}
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 350) {
showFixed();
} else {
hideFixed();
}
});
image-rendering: -webkit-optimize-contrast;