title: jQuery scroll event
body: <p>I am trying the following jQuery code.<br>
  When I scroll either up or down I want to <code>fadeOut</code> a div and when the scroll has stopped <code>fadeIn</code> the same div.</p>
  
  <p>What I have is this:</p>
  
  <pre><code>$(document).ready(function(){
     $(window).scroll(function(e){
       $('#search_tab').fadeOut('slow'); 
     }); 
  });
  </code></pre>
  
  <p>I know that this will <code>fadeOut</code> the div when the scroll has started, but the trick is to fade it back once I stop scrolling.</p>
  
  <p>Now, I have seen this(but still not quite what I want)</p>
  
  <pre><code>    //Firefox
   $('#elem').bind('DOMMouseScroll', function(e){
       if(e.detail &gt; 0) {
           //scroll down
           console.log('Down');
       }else {
           //scroll up
           console.log('Up');
       }
  
       //prevent page fom scrolling
       return false;
   });
  </code></pre>
  
  <p>The above function will not work at all as follows:</p>
  
  <pre><code> $(window).bind('DOMMouseScroll', function(e){
       if(e.detail &gt; 0) {
           //scroll down
           $('#search_tab').fadeOut('slow');
       }else {
           //scroll up
           $('#search_tab').fadeOut('slow');
       }
  
       //prevent page fom scrolling
       return false;
   });
  </code></pre>