jquery淡出带有页面滚动的div

Question

我试图在页面向下滚动时淡出一个 div(随着页面滚动 - 不仅仅是淡出效果)。当页面向下滚动时，我正在使用此处的这段代码调整 div 的不透明度:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
        $('.logo_container').css({'opacity':( 100-scroll )/100});
});

我的问题是，对我来说它淡出得太快了，我希望在用户滚动时淡出得更微妙。谁能想出更好的逻辑来使淡出更慢、更微妙。

这是一个JSFIDDLE显示我的代码在运行中

Answer 1

这适用于此 FIDDLE用非常简单的逻辑。使用这段 jquery 使其工作:

$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    var height = $(window).height();

    $('.logo_container, .slogan').css({
        'opacity': ((height - scrollTop) / height)
    }); 
});

(height - scrollTop) / height gives value set which is linear form 1 to 0.

例子:

height=430px 和 scrollTop=233px。

(height - scrollTop)/height 将给出大约 0.45 的不透明度。