【问题标题】：Fade divs in and out on jQuery scroll在jQuery滚动上淡入和淡出div
【发布时间】：2013-10-09 18:20:20
【问题描述】：

我有一些 div，它们本质上只是彩色矩形，以帮助可视化。当我向下滚动页面时，每个矩形应该 fadeIn 或 fadeOut 取决于滚动条的位置。不幸的是，它吓坏了，褪色更像是一个痉挛的闪光灯。我认为最好通过滚动浏览每个元素的距离来确定不透明度级别，但我什至不确定从哪里开始。

似乎this guy 有类似的问题，但答案无效。

FIDDLE

jQuery

$(document).ready(function(){
    var $element_array = $("#content").find("div");
    $(window).scroll(function(){
        $element_array.each (function(){
            if (($(this).position().top + $(this).height()) < $(window).scrollTop())
                $(this).fadeIn();
            if (($(this).position().top + $(this).height()) > $(window).scrollTop())
                $(this).fadeOut();
        });
    });
 });

HTML

<div id="content">
    <div id="bg1"></div>
    <div id="bg2"></div>
    <div id="bg3"></div>
</div>

CSS

html,body{height:100%;margin:0;}
#content{
    background:#333333;
    height:2000px;
    z-index:1;
}
#bg1{
    background:blue;
    height:400px;
    width:100%;
    z-index:2;
    position:fixed;
    top:100px;
    display: none;
}
#bg2{
    background:green;
    height:400px;
    width:100%;
    z-index:3;
    position:fixed;
    top:200px;
    display: none;
}
#bg3{
    background:red;
    height:400px;
    width:100%;
    z-index:4;
    position:fixed;
    top:300px;
    display: none;
}

【问题讨论】：

标签： javascript jquery html fadein

【解决方案1】：

这里有一些问题

一个问题是$(this).position().top 为每个 div 返回 0（由于它们的固定性质）。您需要解析实际的 css 值。

第二个是函数fadeIn() 和fadeOut() 的性质。如果你在一个淡出的项目上调用fadeOut()，如果一个人在你的页面上积极滚动，它将落后。 但我没有在下面解决这个问题。

我还将else 放在第一个if 之后，因为代码路径（应该）是互斥的。

$(document).ready(function(){
    var $element_array = $("#content").find("div");
    $(window).scroll(function(){
        $element_array.each (function(){
            if ((parseInt($(this).css('top')) + $(this).height()) < $(window).scrollTop())
                $(this).fadeIn();
            else if ((parseInt($(this).css('top')) + $(this).height()) > $(window).scrollTop())
                $(this).fadeOut();
        });
    });
});

【讨论】：

虽然您没有解决由于激进滚动而出现的延迟问题（目前我并不关心），但您的解决方案确实解决了我的特定问题。感谢您的帮助！

【解决方案2】：

只需从 fadeOut 条件中删除 + height() 东西，因为它在那里没有意义

    $(document).ready(function(){
    var remember = 0;
    var $element_array = $("#content").find("div");
    $(window).scroll(function(){

        $element_array.each (function(){
            if (($(this).position().top+ $(this).height()) < $(window).scrollTop()){
                $(this).fadeIn();}
            if (($(this).position().top ) > $(window).scrollTop())
                $(this).fadeOut();
        });

    });
});

http://jsfiddle.net/ruXeq/5/

它会像香草冰一样起作用

【讨论】：

这在fadeOut 被调用时效果很好，但同时所有3 个元素fadeIn。

【解决方案3】：

每次单击并向下滚动页面时都会执行$(window).scroll() 处理程序，因此您将吨的fadeIn() 和fadeOut() 调用推送到jQuery's animation queue。解决方案是在if 语句中添加一些东西来检查淡入淡出是否已经发生，如果是这样，就阻止向队列中添加另一个动画，所以大致是这样的：

$(document).ready(function(){
    var $element_array = $("#content").find("div");
    var fades = 0;
    $(window).scroll(function(){
        $element_array.each (function(){
            if (($(this).position().top + $(this).height()) < $(window).scrollTop() && (fades == 0))
                $(this).fadeIn(function(){fades = 1;});
            if (($(this).position().top + $(this).height()) > $(window).scrollTop() && (fades > 0))
                $(this).fadeOut(function(){ fades = 0; });
        });
    });
});

http://jsfiddle.net/ruXeq/4/

【讨论】：

这在fadeOut 被调用时效果很好，但同时所有3 个元素fadeIn。