Hide header on scroll down, show on scroll up

HTML

<header class="nav-down">
			<ul>
				<li> <a href="#intro">Home</a> </li>
				<li> <a href="#html">HTML</a> </li>
				<li> <a href="#css">CSS </a></li>
				<li> <a href="#javascript">Javascript</a></li>
				<li> <a href="#jquery">Jquery</a></li>
				<li> <a href="#contact">Contact</a></li>
			<ul>
		</header>
		<div id="intro">
			<h1> WEB DEVELOPMENT </h1>
			<p>In today world, everything is sperading across the world and     <br>
			this way to communicate is very fast. In the morden world, web is    <br>
			important tool to share what is in your mind.Some of you want to learn<br>
			it and throught the material available on internet(online course) and<br>
			offline course. We can get a lot of tool to learn the web and Web-   <br>
			Development. But which material suits you ? <br>
			<br>
			That's the thing comes in mind when you want to start to learn the  <br>
			Web-Development. Everybody has his own methods and own comforts.    <br>
			Before two months I don't know anything about the web but now I know<br>
			preety good stuff. So let's check what I got to learn...
			</p>
			<p> To Start learning the web I preferent both online courses and offline<br>
			<br>
			So bascially the Web-Development is divided into three major parts   <br>
			1.HTML( for built a web page)                    <br> 
			2. CSS (to make stylish the web page )                               <br>  
			3. JS ( To dynamically handle the HTML )                             <br>
			here I am going to share the resource which I find helpful for learning<br>
			the web.
			</p>
		</div>
		<div id="html">
			<h2> HTML (what is html click <a href="http://en.wikipedia.org/wiki/HTML" target="_blank">here</a> ) </h2>
			<p>1. <a href="codecademy.com">Codecademy</a>                          <br>
			This is a great website to learn different web-language like html, css <br>
			jquery, php etc. Throught it HTML is very easy to learn and every tag, <br>
			every attributes, elements are make...

CSS

body {
		text-align : center;
		padding-top : 40px;
		
		}
header {
			height : 40px;
			position : fixed;
			top      : 0 ;
			width    : 100%;
			transition: top 0.2s ease-in-out;
			background-color : yellow;
	}
.nav-up{
			top : -40px;
		}
ul li   { 
		display : inline;
		padding  : 50px;
	}
a      { 
		text-decoration : none ; 
	}
	/* text-decoration is used to get the link "without under-line" */
#intro {
		background-color : CCFF66;
		margin-top       : 70px;
		
		}
p      { 
		text-align : center ;
		padding    : 20px;
	}

#html{
		background-color : 00FFCC;
	}
#css {
		background-color : #BDB76B;
	}
	
footer {
		padding : 20px;
		background-color : #7CFC00;
	
	}

JavaScript

// Hide Header on on scroll down
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;
}