How can I make my header fade out/disappear on scroll down and reappear on scroll up?

Question

I've already looked around for quite a bit and stumbled upon some tutorials, and so far, I've achieved not so much. What I'm trying to do is make the top header of my website disappear when the user scrolls down and reappear when they scroll to the top of the page.
My code so far:

  <header class="top-nav">
      <div class="top-nav">
      <!-- Top Row -->
      <div class="top">  
        <div class="container">
          <div class="row vh-center">   
            <div class="col-md-5 slogan">
               Plumbing and Remodelling Services.
            </div>
            <div class="col-md-2">          
              <a href="index.html">
                <img src="img/logo.png" alt="logo" class="logo">
              </a>
            </div>
            <div class="col-md-5 top-social right">
              <div class="social-3 right">
                <a href="index.html#"><i class="icon-facebook"></i></a>
                <a href="index.html#"><i class="icon-dribbble"></i></a>
                <a href="index.html#"><i class="icon-twitter"></i></a>
                <a href="index.html#"><i class="icon-tumblr"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
           <!-- Top Row End -->
    <script type="text/javascript">
        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();

            if(Math.abs(lastScrollTop - st) <= delta)
                return;

            if (st > lastScrollTop && st > navbarHeight){
                $('header').removeClass('top-nav').addClass('nav-up');
            } else {
                if(st + $(window).height() < $(document).height()) {
                    $('header').removeClass('nav-up').addClass('top-nav');
                }
            }

        lastScrollTop = st;
        }
    </script>
</div>
</header>

<header id="home">
    <!-- Navigation --> 
        <div class="navigation">    

      <div class="container">
        <div class="row vh-center">   

                <ul class="nav" id="nav">
                    <li>
              <!-- Menu Link -->
                        <a href="index.html#home" title="About">
                            <span>About</span>
                        </a>
              <!-- Menu Link End -->
                    </li>
                    <li>
                        <a href="http://www.terrylove.com/forums/index.php" title="Forums" target='_blank'>
                            <span>Forums</span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#event" title="Something">
                            <span>Renovations?</span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#portfolio" title="Something">
                            <span>Plumbing?</span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#team" title="Something">
                            <span>Stories?</span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#blog" title="Something">
                            <span>Pricing</span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#contact" title="Contact">
                            <span>Contact</span>
                        </a>
                    </li>
                </ul>
          <select class="select-menu"></select> <!-- select menu for small screens -->

        </div> 
      </div> 

    </div>          
    <!-- Navigation End -->    
  </header>

The CSS:

header {
  margin:0px auto;
  text-align:center;
  position:fixed;
  width: 100%;
  top:0;
  z-index:999;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  float:left;  
  background: #34373d;
  transition: top 0.2s ease-in-out;
}

.nav-up {
    top: -40px;
}

When I scroll down, both the headers are just fixed and don't do what I'm saying (of course I haven't told the second header to do anything, I'll implement that once I've gotten the first one to function)
Can anyone tell me what I'm doing wrong and how I can resolve this issue?

Answer 1

I've answered recently for very similar question. After little modification it should fit your needs: CLICK

Direct link to JSFiddle: http://jsfiddle.net/silveraven/WgL9z/10/

Code just to put jsfiddle link...

Answer 2

I allways use jQuery's scrollTop for these actions.

    $(window).scroll(function(event){
        toggleHeader();
    });

    function toggleHeader() {
        $('header').toggle( $(window).scrollTop() < 50 );
    }

Answer 3

Check if this helps you

jQuery

var lastScrollTop = 0;

$(window).scroll(function () {

var st = $(this).scrollTop();
        if (st < lastScrollTop){
            $('.navbar ').fadeIn();
        } else {
          $('.navbar ').fadeOut();
        }
        lastScrollTop = st;
  })