Hide Navigation Bar On Scroll

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"> </script>

<style type="text/css">
    .navigation-colors {transition: top 0.2s ease-in-out;}   
    .nav-up {top: -99px;} /* Pixels much match height of navigation bar */
</style>

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function(){ 
        // Hide Header on on scroll down
        var didScroll;
        var lastScrollTop = 0;
        var delta = 5;
        var navbarHeight = 10;

        $(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
              $('.navigation-colors').removeClass('nav-down').addClass('nav-up');
            } else {
              // Scroll Up
              if(st + $(window).height() < $(document).height()) {
                $('.navigation-colors').removeClass('nav-up').addClass('nav-down');
              }
            }

            lastScrollTop = st;
          }
        });
//]]>
</script>