仅在滚动时更改 div 的不透明度 - 静止不动时更改回完全不透明度

Question

我正在寻找一种方法来更改 div (.header) 的不透明度以仅在滚动时更改。

所以基本上，当你滚动时，它变得几乎不透明，但当你停止滚动时，它又变得完全可见。

我寻找了一些脚本并最终得到了这些类型的 jQuery 脚本，但这只是我正在寻找的解决方案的一半：

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $( ".header #background" ).fadeIn();
    } else {
        console.log('there');
        $( ".header #background" ).fadeOut();
    }
});

(http://jsfiddle.net/SEH5M/)

有什么想法吗？

Answer 1

通过在每个滚动事件后使用超时检查（在本例中为 200 毫秒）来查看用户是否停止滚动，您可以实现此效果。
小提琴：http://jsfiddle.net/SEH5M/276/

$( ".header #background" ).fadeIn(); //initial fadein
$(window).scroll(function() {
    if(!$( ".header #background" ).hasClass('transition')){ //avoid multiple fades
        $( ".header #background" ).stop().addClass('transition').fadeOut();
    }
    var position = $(window).scrollTop();
    setTimeout(function(){
        if(position - $(window).scrollTop() == 0){ //check if scroll position has changed

            $( ".header #background" ).stop().removeClass('transition').fadeIn();
        }
    }, 200);
});

Answer 2

我认为“几乎不透明”的意思是“几乎透明”。在这种情况下，您可能不想使用fadeOut，因为它会使它完全透明。

您可以改为动画不透明度。

您可以按照其他人的建议设置计时器。

您还需要在开始新动画之前小心停止任何正在运行的动画。

这可能会满足您的需要：

var timer;
$(window).scroll(function() {
  $('.header').stop().animate({opacity:0.2},10);
  clearInterval(timer);
  timer= setInterval(function() {
    $('.header').stop().animate({opacity:1},'fast');
  },100);
});

Fiddle