title: Jquery show/hide menu based on scroll
body: <p>I've got a full screen cover image on a web page and when user scrolls down from the cover to the content, a floating menu will fade in. I got this part covered with the code:</p>
  
  <pre><code>$(window).scroll(function(){                       
  
      if ($(this).scrollTop() &gt; $('#scroll-down').offset().top) { 
             $('.menu').animate({opacity: 1}, 1000);
             } 
  
  });
  </code></pre>
  
  <p>What I can't get working, is to fade the menu out at same point if user scrolls back to the cover on the top. If I add 'else' condition animating opacity back to 0, the menu won't show up at all. </p>