title: Show/Hide footer when scrolling up or down
body: <p>This is what I'm trying to do:</p>
  
  <ol>
  <li>Show <code>div</code> when <code>.scrollTop() &gt; 20</code></li>
  <li><code>fadeOut</code> after delay</li>
  <li>Stop <code>fadeOut</code> when <code>:hover</code> the sticky footer</li>
  </ol>
  
  <p>This is my jquery:</p>
  
  <pre><code>$(function () {
      var targets = $(".footer-nav");
      if ($(window).scrollTop() &gt; 20) {
          $(this).addClass('show');
      }
      $(window).scroll(function () {
          var pos = $(window).scrollTop();
          if (pos &gt; 10) {
              targets.stop(true, true).fadeIn("fast").delay(2000).fadeOut(2000);
          } else {
              targets.stop(true, true).fadeOut();
          }
      });
  });
  </code></pre>
  
  <p>I'm having problems with point <strong>.3</strong>. Also, when I move the scroll wheel really fast the sticky footer flickers. Is there a way to <strong>optimize/improve</strong>. <strong><a href="http://jsfiddle.net/labanino/sqzdq1rm/1/" rel="nofollow">Jsfiddle</a></strong> here. Thanks.</p>