jQuery scroll event

Question

I am trying the following jQuery code.
When I scroll either up or down I want to fadeOut a div and when the scroll has stopped fadeIn the same div.

What I have is this:

$(document).ready(function(){
   $(window).scroll(function(e){
     $('#search_tab').fadeOut('slow'); 
   }); 
});

I know that this will fadeOut the div when the scroll has started, but the trick is to fade it back once I stop scrolling.

Now, I have seen this(but still not quite what I want)

    //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

The above function will not work at all as follows:

 $(window).bind('DOMMouseScroll', function(e){
     if(e.detail > 0) {
         //scroll down
         $('#search_tab').fadeOut('slow');
     }else {
         //scroll up
         $('#search_tab').fadeOut('slow');
     }

     //prevent page fom scrolling
     return false;
 });

Answer 1

There isn't a scrollstop listening event but you can emulate one by using a setTimeout() function and then clearing the timer every time the page scrolls. Here is a sample fiddle.

var timer;     
$(window).scroll(function(e){
         clearTimeout(timer);
         $('#search_tab').fadeOut('slow');
         timer = setTimeout(checkStop,150);
 });

function checkStop(){
  $('#search_tab').fadeIn('slow');
}