jQuery kaydırma olayı

Question

Aşağıdaki jQuery kodunu deniyorum.
Ya yukarı veya aşağı kaydırdığımda fadeOut bir div istiyorum ve kaydırma fadeIn aynı div.

Ne var şudur:

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

Ben kaydırma başladığında bu div fadeOut olacağını biliyorum ama hile ben kaydırma durdurmak kez geri solmaya etmektir.

Şimdi, bu gördük (ama yine de oldukça Benim istediğim bu değil) aşağıdaki gibi

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

yukarıdaki fonksiyon hiç çalışmaz:

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

ancak bir 012 kullanarak bir tane taklit edebilirişlevi ve sayfa kaydırma her timer temizleniyor. İşte bir örnek 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

Her karede kontrol edebilirsiniz :

bir scrollstop dinleme olayı yoktur

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