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

通过使用在每个滚动事件后检查（在这种情况下为200ms）的超时来查看用户是否已停止滚动，您可以实现此效果。
小提琴：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

几乎不透明，＆＃34;我认为你的意思是“几乎透明。”＃34;在这种情况下，您可能不想使用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);
});

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

2 个答案:

Fiddle