title: Sticky header that hides on scroll down + fixed progress bar
body: <p>Trying to create a header + progress bar like this:
  <a href="https://blog.fullstory.com/cross-functional-collaboration/" rel="nofollow noreferrer">https://blog.fullstory.com/cross-functional-collaboration/</a></p>
  
  <ol>
  <li>Need a sticky (fixed) header that only shows up when you scroll up, and hides when you scroll down.</li>
  <li>There is a progress bar fixed below the header at all times. 
  When you scroll up and the blue header is hidden, the progress bar should still show...just like blog.fullstory.com</li>
  </ol>
  
  <p><a href="https://codepen.io/connecteev/pen/eaqxvj" rel="nofollow noreferrer">https://codepen.io/connecteev/pen/eaqxvj</a> </p>
  
  <p>Code Snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Hide Header on scroll down, Show Header on scroll up
  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 {
      /* this is to make room for the top nav / header */
      padding-top: 60px;
      overflow-x: hidden;
  }
  
  header {
    position: fixed;
    top: 0;
    transition: top 0.8s ease-in-out;
    width: 100%;
    background: blue;
    height: 30px;
  }
  
  /* smooth position indicator */
  .scroll-progress-bar {
    position: fixed;
    top: 0;
    height: 3px;
    width: 0;
    background: green;
    color: green;
    z-index: 2;
  }
  
  .nav-up {
      /* hide the top nav on scroll down */
      top: -300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;header class="tw-z-50"&gt;
    &lt;div class="nav-down"&gt;
    &lt;/div&gt;
    &lt;div class="tw-w-full"&gt;
      &lt;div class="scroll-progress-bar"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;&lt;div&gt;This is a test&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to get this to work.
  Any ideas? </p>