A Pen by Joe Watkins.

A-Pen-by-Joe-Watkins.markdown

A Pen by Joe Watkins

A Pen by Joe Watkins on CodePen.

License.

index.html

<div class="container state-nav-is-visible">
  <header id="site-header"></header>
</div>

script.js

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        $(".container").removeClass("state-nav-is-hidden");
    }
    else {
        $(".container").addClass("state-nav-is-hidden");
    }
});

style.css

#site-header {
width:100%;
height:100%;
max-height:63px;
position:fixed;
top:0;
overflow:hidden;
z-index:505;
background:red;
transform:translate3d(0,0,0);
transition-duration:0;
transition-property:opacity,transform;
transition-timing-function:ease-in-out;
backface-visibility:hidden;
perspective:1000;
}

.state-nav-is-visible #site-header {
-o-transition-duration:.25s;
-moz-transition-duration:.25s;
-webkit-transition-duration:.25s;
transition-duration:.25s;
}

.state-nav-is-hidden #site-header {
opacity:0;
-o-transition-duration:.25s;
-moz-transition-duration:.25s;
-webkit-transition-duration:.25s;
transition-duration:.25s;
-o-transform:translate3d(0,-62px,0);
-moz-transform:translate3d(0,-62px,0);
-webkit-transform:translate3d(0,-62px,0);
transform:translate3d(0,-62px,0);
}