Javascript jQuery滚动事件

我正在尝试以下jQuery代码。
当我向上或向下滚动时，我希望

fadeOut

一个div，当滚动停止时

fadeIn

同一个div

我所拥有的是：

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

我知道，当滚动开始时，这将

fadeOut

div，但诀窍是在我停止滚动后将其淡出

现在，我已经看到了这一点（但仍然不是我想要的）

上述功能完全不起作用，如下所示：

 $(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;
 });

---

您可以检查每个帧：

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

---

没有

scrollstop

侦听事件，但您可以通过使用

setTimeout（）

函数，然后在每次页面滚动时清除

计时器来模拟侦听事件。这是一个样本

太好了，正是我想要的
// 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;
}

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

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