A Pen by Philip Benton.

index.html

<!--
  Navigation Bar
-->
<nav class="navigation  navigation__bar  js-menu-visibility" data-navigation-bar-is-visible="true">
  <a href="#" class="company-logo">
    <span>My Company Name</span>
  </a>
  <span class="icon  icon__menu" data-icon="M">
    <span class="screen-reader-text">Menu</span>
  </span>
</nav>

<!--
  Navigation Menu
-->
<nav class="navigation  navigation__menu">
  <h1>Navigation Content</h1>
</nav>

<div class="content">
  <h1>Content here</h1>
</div>  

Navigation-Bar-with-hidden-dropbown.markdown

Navigation Bar with hidden dropbown

A Pen by Philip Benton on CodePen.

License.

script.js

$(document).ready(function(){
 

/** ===========================================
    Hide / show the navigation bar
============================================ */
 
  var previousScroll = 0;
 
  $(window).scroll(function(){
 
    var currentScroll = $(this).scrollTop();
    
    /*
      If the current scroll position is greater than 0 (the top) AND the current scroll position is less than the document height minus the window height (the bottom) run the navigation if/else statement.
    */
    if (currentScroll > 60 && currentScroll < $(document).height() - $(window).height()){

      /*
        If the current scroll is greater than the previous scroll (i.e we're scrolling down the page), and the navigation menu is NOT visible, hide the nav.
      */
      if (currentScroll > previousScroll && $(".navigation__menu").attr("data-navigation-menu-is-visible") !== "true") {

        window.setTimeout(hideNav, 300);
        
      /*
        Else we are scrolling up (i.e the previous scroll is greater than the current scroll), so show the nav.
      */
      } else {
        window.setTimeout(showNav, 300);
      }
      /* 
        Set the previous scroll value equal to the current scroll.
      */
      previousScroll = currentScroll;
    }
 
  });

  function hideNav() {
    $("html").removeClass("navigation__bar--is-visible");
    $(".navigation__bar").removeAttr("data-navigation-bar-is-visible");
  }
  function showNav() {
    $("html").addClass("navigation__bar--is-visible");
    $(".navigation__bar").attr("data-navigation-bar-is-visible", true);
  }




/** ===========================================
    Hide / show the navigation menu
============================================ */
  $(".js-menu-visibility").click(function(e) {

    var attr = $(".navigation__menu").attr("data-navigation-menu-is-visible");

    // See - http://stackoverflow.com/questions/1318076/jquery-hasattr-checking-to-see-if-there-is-an-attribute-on-an-element
    if (typeof attr !== "undefined" && attr !== false) {
      $("html").removeClass("navigation__menu--is-visible");
      $(".navigation__menu").removeAttr("data-navigation-menu-is-visible");
    } else {
      $("html").addClass("navigation__menu--is-visible");
      $(".navigation__menu").attr("data-navigation-menu-is-visible", true);
    }
  });
 
});

style.scss

@import "compass";
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;
  height: 100%;
  margin-top: 60px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: #999;
  text-decoration: none;
}

.navigation {
  font-family: Helvetica, Arial, sans-serif;
  padding: 0 18px;
}

.navigation__bar {
  height: 60px;
  line-height: 60px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 900;
  cursor: pointer;
  background-color: White;
  opacity: 0;
  -webkit-transform: translate(0, -60px);
  -moz-transform: translate(0, -60px);
  -ms-transform: translate(0, -60px);
  transform: translate(0, -60px);
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -ms-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .25s;
  -moz-transition-duration: .25s;
  -ms-transition-duration: .25s;
  transition-duration: .25s;
}

.navigation__menu {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 100px;
  position: fixed;
  width: 100%;
  z-index: 800;
  opacity: 0;
  -webkit-transform: translate(0, -130%);
  -moz-transform: translate(0, -130%);
  -ms-transform: translate(0, -130%);
  transform: translate(0, -130%);
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -ms-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .6s;
  -moz-transition-duration: .6s;
  -ms-transition-duration: .6s;
  transition-duration: .6s;
  background-color: Gainsboro;
}

.company-logo {
  color: Gainsboro;
  font-weight: 700;
  text-transform: uppercase;
}

.icon__menu {
  float: right;
}
.icon__menu:before {
  line-height: 60px;
}

.navigation__bar--is-visible .navigation__bar {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -ms-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .25s;
  -moz-transition-duration: .25s;
  -ms-transition-duration: .25s;
  transition-duration: .25s;
}

.navigation__menu--is-visible body {
  overflow: hidden;
}
.navigation__menu--is-visible .navigation__menu {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -ms-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .6s;
  -moz-transition-duration: .6s;
  -ms-transition-duration: .6s;
  transition-duration: .6s;
}

.content {
  min-height: 1000px; 
}