Header hiding on scroll positioning

Question

I have included a snippet to show the general idea of what I have right now. The snippet will show a header and if you scroll the header stays the same size until the full height of the header has been scrolled down and then it will go away. Then when you scroll up (when the header gone) the header will show.

The issue I cannot seem to figure out is how to remove the position: fixed from my css and still get the javascript to work. I want the header to scroll down normally (just like Stack overflow's header), however with the ability to still re-appear when scrolling up.

I tried taking out position: fixed and the script broke. I also tried adding position: fixed to the nav-up class...neither change worked.

Does anyone know what I could do to make this work?

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}

html, body {
	padding:0;
	margin:0;
}
header {
    /*background: #2F4F4F;*/
	/*background: #53868B;*/
	/*background: #35586C;*/
	background: #F2F2F2;
    height: 120px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
	z-index: 100;
}

.nav-up {
    top: -120px;
}
#logo {
	padding: 5px 20%;
	display: inline-block;
}
#logo img {
	height: 110px;
	width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="nav-down">
	<div id="logo">
		<img src="images/eslich.png" alt="">
	</div>
</header>
<br><br><Br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><Br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><Br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><Br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 1

Update

This is the new jsfiddle using her code https://jsfiddle.net/jz8aa5yz/2/

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
            if (st < navbarHeight) {
            if (st === 0 || st < 50) {
            $('header').css('position', 'static');
          }
        } else {
            $('header').css('position', 'fixed');
        }
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

`

Old

I'm still testing some javascript, but I wonder if the effect you wanted is something like this? I did a few things different, but the main things were using hide(), css(), slideUp(), slideDown(), and if / else statements. Here's a jsfiddle of the example

<script>
        $(document).ready(function () {
            var header = $("header");
            var lastScrollTop = 0;

            $(window).on("scroll", function () {
                currentScrollTop = $(this).scrollTop();

                if ($("body").scrollTop() > header.outerHeight()) {
                    if (currentScrollTop > lastScrollTop) {
                        if (header.css("position") == "fixed") {
                            header.slideUp();
                        } else {
                            header.css({
                                display: "none",
                                position: "fixed"
                            });
                        }
                    } else {
                        header.slideDown();
                    }
                } else {
                    if (currentScrollTop === 0) {
                        header.css({
                            display: "block",
                            position: "static"
                        });
                    }
                }

                lastScrollTop = currentScrollTop;
            });
        });
    </script>