title: Fixed Nav Menu - How to animate in and out using javascript?
body: <p>I am trying to created a fixed navigation menu that appears when the user scrolls past 500px, and disappears as the user scrolls back up the page.</p>
  
  <p>However, I don't want it to just appear and disappear, but to animate in and out in a sliding motion.</p>
  
  <p>I found part of the answer to this question on Stackoverflow (<a href="https://stackoverflow.com/questions/18473667/jquery-using-scrolltop-to-make-animated-sticky-menu">link</a>). JSFiddle solution: <a href="http://jsfiddle.net/k3AHM/1/" rel="nofollow noreferrer">http://jsfiddle.net/k3AHM/1/</a></p>
  
  <pre><code>var nav = $('.nav');
  var scrolled = false;
  
  $(window).scroll(function () {
  
  if (500 &lt; $(window).scrollTop() &amp;&amp; !scrolled) {
      nav.addClass('visible').animate({ top: '0px' });
      scrolled = true;
  }
  
  if (500 &gt; $(window).scrollTop() &amp;&amp; scrolled) {
      nav.removeClass('visible').css('top', '-30px');
      scrolled = false;      
  }
  </code></pre>
  
  <p>The above code works to the extent that the fixed nav menu animates into view when user goes past 500px. However, I need the menu to animate <strong>out</strong> again as the user scrolls back up the screen instead of just disappearing instantly.</p>
  
  <p>I would be very grateful if anyone can suggest changes to the javascript which allow the menu to animate both in and out?</p>
  
  <p>Thank you!</p>