title: Hide navbar on scroll down and show image to open it back
body: <p>I'm trying to make a navbar which will hide on scroll down and will be replaced with a button which should return back the navbar when clicked. </p>
  
  <p>You can exactly what I need here: <a href="http://eu.battle.net/overwatch/en/game/" rel="nofollow">example</a>. </p>
  
  <p>Here is a sample of the code that I'm trying to use but, I need when the navbar is hidden to show a link or a picture in the top center of the browser, which is clickable and when I click it to show the navbar again. And also to stop the showing when scroll up.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  var navbarHeight = $('header').outerHeight();
  
  $(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) &lt;= 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 &gt; lastScrollTop &amp;&amp; st &gt; navbarHeight){
          // Scroll Down
          $('header').removeClass('nav-down').addClass('nav-up');
      } else {
          // Scroll Up
          if(st + $(window).height() &lt; $(document).height()) {
              $('header').removeClass('nav-up').addClass('nav-down');
          }
      }
      
      lastScrollTop = st;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      padding-top: 40px;
  }
  
  header {
      background: #f5b335;
      height: 40px;
      position: fixed;
      top: 0;
      transition: top 0.2s ease-in-out;
      width: 100%;
  }
  
  .nav-up {
      top: -40px;
  }
  
  main {
     background:url(
  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
     ) repeat;
      height: 2000px;
  }
  
  footer { background: #ddd;}
  * { color: transparent}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;header class="nav-down"&gt;
      This is your menu.
  &lt;/header&gt;
  &lt;main&gt;
      This is your body.
  &lt;/main&gt;
  &lt;footer&gt;
      This is your footer.
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>