A Pen by Joe Watkins.

index.html

<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
     
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">Main Nav</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
          <ul class="nav navbar-nav">
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
        

    </nav>

  <div class="container">
    <h1>Show/Hide Navbar on scroll</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea suscipit dignissimos cumque eveniet nihil tempora iusto atque aut culpa consectetur quam et. Consectetur labore dolores unde consequatur totam placeat ipsam ut debitis eligendi assumenda magnam esse sapiente id veniam repudiandae aut enim iusto rem beatae a necessitatibus molestiae ad magni dicta quas cum dolorum nostrum reiciendis eaque soluta. Consectetur temporibus voluptatibus similique error ab iste accusantium voluptas ullam beatae praesentium quibusdam excepturi nemo provident consequuntur laudantium reprehenderit illo ipsum porro ratione aut veritatis modi laborum placeat soluta laboriosam perspiciatis cupiditate dolorum sint pariatur doloribus reiciendis sit atque nisi. Dignissimos eligendi dolorem vitae at ipsum tempore eum doloribus officia nam iure nesciunt quia cum quisquam facilis fuga possimus optio voluptatem similique tenetur velit commodi illo error veritatis amet omnis aut quos. Natus assumenda itaque ullam necessitatibus magnam iusto animi atque veniam sint vero! Laboriosam consequatur accusamus facere error suscipit sapiente porro incidunt! Itaque cum aliquid maxime facere quasi architecto et id quo porro reiciendis sapiente neque consequuntur quis nostrum rerum nisi fugit eligendi sit dignissimos adipisci similique molestias reprehenderit quos corporis veritatis dolorum eaque ipsa amet recusandae blanditiis. Architecto voluptate totam recusandae aut suscipit dolorem alias commodi provident ex ipsa maxime laborum minima hic explicabo dolorum repellat molestiae distinctio veritatis animi maiores eligendi necessitatibus adipisci ut nam similique cupiditate eveniet atque culpa mollitia veniam natus tempora tempore unde quia ullam delectus iure iusto amet reiciendis dolor nemo odio! Nulla praesentium veritatis nam voluptas accusamus doloribus consequuntur molestias aspernatur molestiae incidunt facilis debitis optio similique laborum dolorum est voluptatibus sed provident officia consectetur quos sapiente blanditiis veniam dignissimos quae! Ullam maiores odit ab maxime id obcaecati deleniti quos sunt quibusdam ducimus voluptatem aperiam consectetur culpa tempore provident nisi amet itaque adipisci commodi explicabo facere nihil eos animi asperiores quo. Quidem sapiente provident dolorum repudiandae error quia amet aliquam voluptatum ab asperiores. Voluptatem officia soluta ad dolor dolore reprehenderit modi esse ratione ullam ea et nisi placeat nobis deserunt eum dignissimos eos at a in porro. Illo accusamus omnis aliquid facere ullam. Tempora nemo cumque facilis doloremque molestiae est dolorem. Soluta animi nisi quas cupiditate maiores dolorum ducimus! Dolores cumque eaque nisi debitis quae ratione suscipit quos in eos odio eveniet at quasi saepe vero quis maxime consectetur molestias assumenda voluptatum fugit mollitia itaque unde autem fuga sit nobis possimus incidunt deleniti praesentium architecto. Quidem iusto reiciendis ea culpa consequuntur totam quis temporibus molestiae hic animi tempora blanditiis necessitatibus recusandae dolor itaque architecto dolorem corporis labore pariatur quisquam qui optio maiores cupiditate laudantium nesciunt deleniti dolores! Ullam deleniti consectetur sequi esse illum aut magni excepturi ipsum eum vero architecto consequatur ipsam officiis nostrum eos placeat illo quia dicta nesciunt vitae numquam dignissimos voluptatibus nemo cupiditate accusamus molestias nulla quaerat est id sit! Libero molestiae doloremque maxime cumque sint accusamus sed tempora sit suscipit exercitationem nostrum mollitia perferendis inventore. Vero molestiae commodi corporis ea quibusdam natus voluptates beatae magni! Ab nihil quo repellendus odit amet numquam fugiat repellat aliquid! Quis officiis ipsum eaque at?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea suscipit dignissimos cumque eveniet nihil tempora iusto atque aut culpa consectetur quam et. Consectetur labore dolores unde consequatur totam placeat ipsam ut debitis eligendi assumenda magnam esse sapiente id veniam repudiandae aut enim iusto rem beatae a necessitatibus molestiae ad magni dicta quas cum dolorum nostrum reiciendis eaque soluta. Consectetur temporibus voluptatibus similique error ab iste accusantium voluptas ullam beatae praesentium quibusdam excepturi nemo provident consequuntur laudantium reprehenderit illo ipsum porro ratione aut veritatis modi laborum placeat soluta laboriosam perspiciatis cupiditate dolorum sint pariatur doloribus reiciendis sit atque nisi. Dignissimos eligendi dolorem vitae at ipsum tempore eum doloribus officia nam iure nesciunt quia cum quisquam facilis fuga possimus optio voluptatem similique tenetur velit commodi illo error veritatis amet omnis aut quos. Natus assumenda itaque ullam necessitatibus magnam iusto animi atque veniam sint vero! Laboriosam consequatur accusamus facere error suscipit sapiente porro incidunt! Itaque cum aliquid maxime facere quasi architecto et id quo porro reiciendis sapiente neque consequuntur quis nostrum rerum nisi fugit eligendi sit dignissimos adipisci similique molestias reprehenderit quos corporis veritatis dolorum eaque ipsa amet recusandae blanditiis. Architecto voluptate totam recusandae aut suscipit dolorem alias commodi provident ex ipsa maxime laborum minima hic explicabo dolorum repellat molestiae distinctio veritatis animi maiores eligendi necessitatibus adipisci ut nam similique cupiditate eveniet atque culpa mollitia veniam natus tempora tempore unde quia ullam delectus iure iusto amet reiciendis dolor nemo odio! Nulla praesentium veritatis nam voluptas accusamus doloribus consequuntur molestias aspernatur molestiae incidunt facilis debitis optio similique laborum dolorum est voluptatibus sed provident officia consectetur quos sapiente blanditiis veniam dignissimos quae! Ullam maiores odit ab maxime id obcaecati deleniti quos sunt quibusdam ducimus voluptatem aperiam consectetur culpa tempore provident nisi amet itaque adipisci commodi explicabo facere nihil eos animi asperiores quo. Quidem sapiente provident dolorum repudiandae error quia amet aliquam voluptatum ab asperiores. Voluptatem officia soluta ad dolor dolore reprehenderit modi esse ratione ullam ea et nisi placeat nobis deserunt eum dignissimos eos at a in porro. Illo accusamus omnis aliquid facere ullam. Tempora nemo cumque facilis doloremque molestiae est dolorem. Soluta animi nisi quas cupiditate maiores dolorum ducimus! Dolores cumque eaque nisi debitis quae ratione suscipit quos in eos odio eveniet at quasi saepe vero quis maxime consectetur molestias assumenda voluptatum fugit mollitia itaque unde autem fuga sit nobis possimus incidunt deleniti praesentium architecto. Quidem iusto reiciendis ea culpa consequuntur totam quis temporibus molestiae hic animi tempora blanditiis necessitatibus recusandae dolor itaque architecto dolorem corporis labore pariatur quisquam qui optio maiores cupiditate laudantium nesciunt deleniti dolores! Ullam deleniti consectetur sequi esse illum aut magni excepturi ipsum eum vero architecto consequatur ipsam officiis nostrum eos placeat illo quia dicta nesciunt vitae numquam dignissimos voluptatibus nemo cupiditate accusamus molestias nulla quaerat est id sit! Libero molestiae doloremque maxime cumque sint accusamus sed tempora sit suscipit exercitationem nostrum mollitia perferendis inventore. Vero molestiae commodi corporis ea quibusdam natus voluptates beatae magni! Ab nihil quo repellendus odit amet numquam fugiat repellat aliquid! Quis officiis ipsum eaque at?</p>
  </div>

   
    <!-- FOOTER -->
    <div class="container">
      <footer>
        <div class="row">
          <div class="col-lg-12">
            Copyright &copy; Company 2013 &middot; Facebook &middot; Twitter &middot; Google+
          </div>
        </div>
      </footer>
    </div>

    </div><!-- /container -->

script.js

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        $("body").removeClass("state-nav-is-hidden");
    }
    else {
        $("body").addClass("state-nav-is-hidden");
    }
});

Show-Hide-main-nav-on-scroll.markdown

Show/Hide main nav on scroll

Using CSS, and jQuery we hide main nav on down scroll and show on up scroll. This example is using Bootstrap3. Emulating Mail Chimp's main nav behavior

A Pen by Joe Watkins on CodePen.

License.

style.css

body {
    margin-top: 70px
}

footer {
    margin: 50px 0
}

.navbar {
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    -moz-transition-property: opacity, -moz-transform;
    -o-transition-property: opacity, -o-transform;
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -moz-transition-delay: 0.25s;
    -o-transition-delay: 0.25s;
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s
}

.state-nav-is-visible .navbar {
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s
}

.state-nav-is-hidden .navbar {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    -moz-transform: translate3d(0, -62px, 0);
    -ms-transform: translate3d(0, -62px, 0);
    -o-transform: translate3d(0, -62px, 0);
    -webkit-transform: translate3d(0, -62px, 0);
    transform: translate3d(0, -62px, 0)
}

.navbar-ex1-collapse {
    width: 100%
}

@media (min-width: 768px) {
  .navbar-ex1-collapse {
    width:auto;
  }
}