jQuery scroll event

Question

Sto provando il seguente codice jQuery.
Quando si scorre verso l'alto o verso il basso, desidero impostare fadeOut a div e quando lo scroll si è fermato fadeIn lo stesso div.

Quello che ho è questa:

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

So che questo fadeOut il div quando il rotolo è iniziata, ma il trucco è quello di svanire di nuovo una volta che mi fermo a scorrimento.

Ora, ho visto questo (ma ancora non del tutto quello che voglio)

//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; 
}); 

La funzione di cui sopra non funziona affatto come segue:

$(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

non c'è un ascolto evento scrollstop ma è possibile emulare uno utilizzando un setTimeout() e quindi si cancella lo timer ogni volta che la pagina scorre. Ecco un esempio fiddle.

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

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

Answer 2

È possibile controllare su ogni fotogramma :

// shim for frame listener 
window.requestAnimFrame = (function(){ 
     return window.requestAnimationFrame  || 
       window.webkitRequestAnimationFrame || 
       window.mozRequestAnimationFrame || 
       window.oRequestAnimationFrame  || 
       window.msRequestAnimationFrame  || 
       function(callback){ 
       window.setTimeout(callback, 1000/60); 
       }; 
    })(); 

    // on every frame, call render() 
    (function animloop(){ 
     requestAnimFrame(animloop); 
     render(); 
    })(); 


var lastScroll = 0, isScrolling = false; 
function render(){ 
    var thisScroll = $(window).scrollTop(); 
    if(lastScroll !== thisScroll){ 
    if(!isScrolling){ 
     // scrolling has started, fade out div 
     $('#search_tab').stop().fadeOut('slow'); 
    } 
    isScrolling = true; 
    }else{ 
    if(isScrolling){ 
     // scrolling has stopped, fade in div 
     $('#search_tab').stop().fadeIn('slow'); 
    } 
    isScrolling = false; 
    } 
    lastScroll = thisScroll; 
}