Bootstrap hide and show navbar based on scroll direction

by dumptyd

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/3/cosmo/bootstrap.min.css">
 <nav class="navbar navbar-inverse navbar-fixed-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav> 

<section class="gutter-top">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem itaque laborum blanditiis! Explicabo ipsum numquam excepturi aut dolores ad perferendis porro nesciunt, fugit saepe doloremque, ipsam id tenetur reiciendis reprehenderit dolore. Dignissimos nemo quam amet blanditiis! Similique dicta a, harum aperiam aliquam ea iusto? Quas nobis soluta, autem, maxime eveniet, mollitia amet aut tenetur nemo accusamus nostrum sed quis non quam nisi vel dolorum iusto officia neque. Aliquam deserunt, fugit iure molestiae necessitatibus odio fuga non inventore minima soluta maxime dicta officiis tempora adipisci, sunt quo expedita eos iusto placeat deleniti, corporis velit. Odit nemo magni neque eum unde, porro asperiores vitae voluptate maxime voluptatum laboriosam. Animi, repudiandae adipisci quia veniam, error, possimus id rem ex fugiat reiciendis pariatur nostrum ea. Sint nisi facilis pariatur consequatur quae? Praesentium doloremque ducimus fugiat ad unde distinctio ut enim, quaerat velit atque asperiores aliquam sequi nulla, labore perspiciatis totam officia...

CSS

body {
  height: 300vh;
  background-color: #eee;
}

.navbar-fixed-custom {
  position: fixed;
  top: 0;
  width: 100%;
  transition: top .4s ease;
}

.gutter-top {
  margin-top: 100px;  /*same or more than navbar height*/
}

JavaScript

var lastScrollTop = 0;
var shown = true;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop && shown){
       $('.navbar-fixed-custom').css('top', '-100px');
       shown = false;
   } else if (st < lastScrollTop && !shown) {
      $('.navbar-fixed-custom').css('top', '0');
       shown = true;
   }
   lastScrollTop = st;
});