title: How to show and hide menu based on start and scroll
body: <p>I have two menus on a page, I am trying to show the one when the page is loaded and the other when there is a scroll.
  This is my page <a href="http://dev.thegabrielmethod.com/gabriel/" rel="nofollow noreferrer">Link</a></p>
  
  <p>I would like to show the white part when position is at the top
  and the blue part when there is a scroll past the top position</p>
  
  <p>This is what am trying presently</p>
  
  <pre><code> &lt;script type="text/javascript" src="//code.jquery.com/jquery-git.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;//&lt;![CDATA[
  $(function(){
  // Hide Header on on scroll down
  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-bar-below op-page-header cf').addClass('banner include-nav');
      } else {
          // Scroll Up
          if(st + $(window).height() &lt; $(document).height()) {
              $('header').removeClass('banner include-nav').addClass('nav-bar-below op-page-header cf');
          }
      }
  
      lastScrollTop = st;
  }
  });//]]&gt; 
  
  &lt;/script&gt;
  </code></pre>
  
  <p>can some one please help its not working for me</p>