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.

(高度 - scrollTop)/高度将给出不透明度0.45.

Answer 2

方案A

jQuery 动画

$(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;
}