title: Show / Hide div on scroll
body: <p>I would need to show my div (footer-nav) on 2200 px after scrolling 
  &amp; then hide it again on 2800 px.</p>
  
  <p>All good with my code in the initial part, 
  so my element is shown after 2200px and hides when the mouse does not move for two seconds,</p>
  
  <p><strong>but I would like also to hide completely my div when reaching 2800px scroll.</strong></p>
  
  <p>Have a look at my snippet, would be great to trigger the event each time I scroll up or down the window:</p>
  
  <pre><code>$(window).scroll(function(event) {
  function footer()
  {
      var scroll = $(window).scrollTop(); 
      if(scroll &gt; 2200)
      { 
          $(".footer-nav").fadeIn("slow").addClass("show");
      }
      else
      {
          $(".footer-nav").fadeOut("slow").removeClass("show");
      }
  
      clearTimeout($.data(this, 'scrollTimer'));
      $.data(this, 'scrollTimer', setTimeout(function() {
          if ($('.footer-nav').is(':hover')) {
              footer();
          }
  
  
          else
          {
              $(".footer-nav").fadeOut("slow");
          }
      }, 2000));
  }
  footer();});
  </code></pre>
  
  <p>Thanks in advance!</p>