Hide top nav on scroll

HTML:

<header class="header">
    <div class="nav-top">
        <span>Top Nav</span>
    </div>
    <nav class="navbar">
        <div class="container">
            <ul class="navbar-menu">
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Info</a></li>
                <li><a href="">Business</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </nav>
</header>

CSS:

header {  
   background: #f5b335;  
   position: fixed;  
   top: 0;  
   width: 100%;
}
.nav-top{  
   background: #045292;   
   padding: 10px 0;  
   text-align: center;
}

Jquery:

  var headerHeight = $('header').outerHeight();
    $(window).scroll(function () {
        if ($(window).scrollTop() > headerHeight) { 
            $('#top_nav').slideUp("slow");
        }
        else{
            $('#top_nav').slideDown("slow");
        }
  });