title: Header doesnt hide/show again after certain scroll
body: <p>Hello Why does my Script not work?
  I created two header, one should hide and the other show after 1980px of scroll which works!
  But then i want it to hide and show again after 2500px so basicallythat its just like in the beginning with out any scroll anymore.</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>$(window).scroll(function() {
  
      if ($(this).scrollTop()&gt;1980)
       {
          $('#navBar').fadeOut();
  
       }
      
      else if ($(this).scrollTop()&gt;2500)
      {
             $('#navBar').fadeIn();
      }
      else
       {
        $('#navBar').fadeIn();
              
       }
   });</code></pre>
  </div>
  </div>
  </p>