jquery用页面滚动淡出div

Question

我试图在页面向下滚动时淡出div（使用页面滚动 - 而不仅仅是fadeOut效果）。我在这里用这段代码向下滚动调整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 给出的值设置为线性形式1到0.

示例：

height = 430px，scrollTop = 233px。

（height - scrollTop）/ height将给出不透明度0.45。

Answer 2

解决方案A

jQuery animate

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    $('.logo_container, .slogan').stop().animate(
        {opacity: (( 180-scroll )/100)+0.1},
        "slow"
    );
});

解决方案B

CSS过渡

.wrapper {
    height:1000px
}
.logo_container {
    background:red;
    width:250px;
    height:500px;
    position:relative;
    margin:0px auto;
    transition: opacity 1s ease;
}

Answer 3

通过更改该部分( 1000-scroll )/1000

来改进解决方案

JSFIDDLE

希望有所帮助