滾動時隱藏和顯示導航欄

Question

我想改進一個現有的代碼，允許我在加載頁面後顯示導航欄，並在用戶向下滾動後消失。我想讓用戶每滾動一次，導航欄就會出現。基本上，我需要一個Headroom plugin，但作爲一個純粹的JavaScript。我會考慮任何其他簡單的選擇。

這是一些HTML和JavaScript本身：

//hide and show navbar when scrolled <100px 
 
(function($) { 
 
    $(document).ready(function() { 
 

 
    // hide .navbar first 
 
    $(".navbar").show(); 
 

 
    // fade in .navbar 
 
    $(function() { 
 
     $(window).scroll(function() { 
 
     // set distance user needs to scroll before we fadeIn navbar 
 
     if ($(this).scrollTop() > 100) { 
 
      $('.navbar').fadeOut(); 
 
     } else { 
 
      $('.navbar').fadeIn(); 
 
     } 
 
     }); 
 

 

 
    }); 
 

 
    }); 
 
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<header class="nav-down"> 
 
    <nav class="navbar navbar-default navbar-fixed-top container-fluid" id="navbar-exe" role="navigation"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"> 
 
\t \t \t \t \t <span class="sr-only">Toggle navigation</span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t </button> 
 
     <a class="navbar-brand logo page-scroll text-muted" href="#Home">VAYNER<span class="medialogo">MEDIA</span></a> 
 
     </div> 
 
     <div class="collapse navbar-collapse " id="navbar-collapse-2"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#About" class="page-scroll">About</a></li> 
 
      <li><a href="#Services" class="page-scroll">Contact</a></li> 
 

 
     </ul> 
 
     </div> 
 
     <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container --> 
 
    </nav> 
 
    <!-- /.navbar --> 
 
</header>