我怎样才能使我的头淡出/消失在向下滚动和重新出现在向上滚动

我已经四处寻找了很多，偶然发现了一些教程，到目前为止，我还没有取得多少成就。我想做的是让我的网站的顶部标题消失时，用户向下滚动和重新出现时，他们滚动到页面的顶部。
我的代码到目前为止:

  <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>

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;
}

当我向下滚动时，两个头都是固定的，不做我所说的(当然我没有告诉第二个头做任何事情，一旦我让第一个头起作用，我会实现它)
谁能告诉我我做错了什么，我该如何解决这个问题?