title: Sticky navigation which appears on scroll
body: <p>I am trying to create a menu which is hidden but appears, fixed to the top, once the user begins scrolling down the page. So far I have managed to create a menu which sticks to the top upon scrolling but am stuck on how to hide this menu initially. </p>
  
  <p>This is the code I am using so far:
  (I am using wordpress-headway)</p>
  
  <p>JQuery:</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  jQuery(document).ready(function($) {
   //STICKY NAV
   var isMobile = {
   Android: function() {
   return navigator.userAgent.match(/Android/i) ? true : false;
   },
   BlackBerry: function() {
   return navigator.userAgent.match(/BlackBerry/i) ? true : false;
   },
   iOS: function() {
   return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
   },
   Windows: function() {
   return navigator.userAgent.match(/IEMobile/i) ? true : false;
   },
   any: function() {
   return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
   }
   };
  //Calculate the height of &lt;header&gt;
   //Use outerHeight() instead of height() if have padding
   var aboveHeight = $('.top-row').outerHeight();
  
   //when scroll
   $(window).scroll(function(){
  
   //if scrolled down more than the header’s height but this isn't mobile
   if ($(window).scrollTop() &gt; aboveHeight &amp;&amp; !isMobile.any()){
  
   // if yes, add “fixed” class to the &lt;nav&gt;
   // add padding top to the #content 
   // (value is same as the height of the nav)
   $('.block-type-navigation').addClass('fixed').css('top','0').next()
   .css('padding-top','42px');
  
   } else {
  
   // when scroll up or less than aboveHeight,
   // remove the “fixed” class, and the padding-top
   $('.block-type-navigation').removeClass('fixed').next()
   .css('padding-top','0');
   }
   });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.fixed {
       position:fixed !important;
        left: 0;
        text-align: center;
  }
  .fixed .block-content {
        display: inline-block;
        text-align: left;
        width: 940px; /* This should be the width of your grid!!! */
        float:none;
  }
  .fixed {
  position:fixed !important;    
   left: 0;      
  text-align: center;
  display: block !important;
  }
  </code></pre>
  
  <p>It's driving me crazy so I'd appreciate ANY help!</p>
  
  <p>Thank you!</p>