jquery - 仅在滚动时更改 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 毫秒)以查看用户是否已停止滚动，您可以实现此效果。
fiddle :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);
});