based on direction1

by lovromar

HTML

<div class='header'>Header</div>
<div class='content'></div>

CSS

body {
    margin:0;
}
.content {
    width:500px;
    height:2000px;
    background: red;
    display: block;
    margin: auto;
}
.header {
    position: fixed;
    height:50px;
    width:100%;
    background: green;
}

JavaScript

/*var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var newscroll;
mywindow.scroll(function () {
    newscroll = mywindow.scrollTop();
    if (newscroll > mypos && !up) {
        $('.header').stop().fadeOut();
        up = !up;
        console.log(up);
    } else if(newscroll < mypos && up) {
        $('.header').stop().fadeIn();
        up = !up;
    }
    mypos = newscroll;
});*/

var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var newscroll;
mywindow.scroll(function () {
    newscroll = mywindow.scrollTop();
    if (newscroll > mypos && !up) {
        $('.header').stop().slideToggle();
        up = !up;
        console.log(up);
    } else if(newscroll < mypos && up) {
        $('.header').stop().slideToggle();
        up = !up;
    }
    mypos = newscroll;
});