Zdarzenie przewijania jQuery

Question

Próbuję następujący kod jQuery.
Kiedy przewijam w górę lub w dół, chcę fadeOut div i gdy scroll zatrzymał się fadeIn tego samego diva.

Co mam to:

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

wiem, że to będzie fadeOut div podczas przewijania rozpoczęła, ale sztuką jest zanikać go kiedyś zatrzymać przewijanie.

Teraz Widziałem to (ale jeszcze nie całkiem to, czego chcę)

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

Powyższa funkcja nie działa w ogóle, co następuje:

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

nie ma scrollstop słuchać wydarzenie ale można naśladować jednego przy użyciu setTimeout() Funkcja, a następnie czyszczenie timer za każdym razem, gdy strona przewija. Oto przykład 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

Można sprawdzić na każdej klatce :

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