title: Performance issue with hiding header on scrolling in javascript
body: <p>I am trying to build a navigation bar which:</p>
  
  <ul>
  <li>starts off with a big height</li>
  <li>hides when scrolled down</li>
  <li>shows a shrunk version when scrolled up</li>
  <li>grows to full height when fully scrolled to the top</li>
  </ul>
  
  <p>So far, I found a way that works. But there must be a more efficient way. I have a function to hide and show the navigation bar – and one Interval to grow again when I reached the top. I tried to combine them but always failed... Thanks!</p>
  
  <p><b>HTML</b></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;Test&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;header id="navbar" class="navbar"&gt;
          &lt;a href="#home"&gt;Home&lt;/a&gt;
          &lt;a href="#news"&gt;News&lt;/a&gt;
          &lt;a href="#contact"&gt;Contact&lt;/a&gt;
        &lt;/header&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p><b>JavaScript</b></p>
  
  <pre><code>var prevScrollpos = window.pageYOffset;
  var shrinkHeader = 200;
  function tellMeAStory() {
  }
  
  window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos &gt; currentScrollPos) {
      document.getElementById("navbar").style.top = "0";
    } else {
      document.getElementById("navbar").style.top = "-200px";
      $('.navbar').addClass('shrink');
    }
  
    prevScrollpos = currentScrollPos;
  }
  
  setInterval(function(){
    var scroll = getCurrentScroll();
     if (scroll &lt; 10){
      $('.navbar').removeClass('shrink');
    } else {}
  },250)
  
  function getCurrentScroll() {
      return window.pageYOffset || document.documentElement.scrollTop;
      };
  
  </code></pre>
  
  <p><b>CSS</b></p>
  
  <pre><code>body {
    margin: 0;
    background-color: #f1f1f1;
    font-family: Arial, Helvetica, sans-serif;
    height: 2000px;
  }
  
  header {
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
    display: block;
    transition: all 0.3s;
    height: 200px;
  }
  
  .grow{
    height: 200px;
  }
  
  .shrink{
    height: 50px;
  }
  
  #navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    font-size: 17px;
  }
  
  #navbar a:hover {
    background-color: #ddd;
    color: black;
  }
  </code></pre>
  
  <p><b>JSFiddle</b></p>
  
  <p><a href="https://jsfiddle.net/Jimmey/wry54an7/4/" rel="nofollow noreferrer">https://jsfiddle.net/Jimmey/wry54an7/4/</a></p>