【问题标题】：jquery fade out div with page scrolljquery用页面滚动淡出div
【发布时间】：2015-03-09 12:17:24
【问题描述】：

我试图在页面向下滚动时淡出 div（页面滚动 - 不仅仅是淡出效果）。当页面向下滚动时，我在这里使用这段代码调整 div 的不透明度：

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

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

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

【问题讨论】：

我更新了你的 jsfiddle，也许这样更好？ JSFiddle
是的，这真的很好。是什么促使您使用这些数字 - 还是只是反复试验？
只是一点点试错，稍微调整一下你的小提琴。
jsfiddle.net/2k3hfwo0/3 这个？按窗口高度的一半计算
@VitorinoFernandes 这实际上是完美的 - 使用窗口高度的好主意 - 我稍微改变了它以使用父容器高度

标签： jquery css opacity scrolltop

【解决方案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) / 高度将给出大约 0.45 的不透明度。

【讨论】：

如果我不希望它变为 0 或完全淡出，我将如何设置它使其只淡入 0.3？

【解决方案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;
}

【讨论】：

【解决方案3】：

通过更改该部分改进了解决方案( 1000-scroll )/1000

JSFIDDLE

希望对你有帮助

【讨论】：