3

基本的に視覚化に役立つカラフルな長方形である div がいくつかあります。ページを下にスクロールすると、スクロールバーの位置に応じてfadeIn、各長方形が必要になります。fadeOut残念ながら、それはおかしくなり、フェードは痙攣的なストロボライトとしてさらに外れます. 不透明度のレベルは、スクロールに関して各要素をどれだけ進んでいるかによって判断する方がよいと思いますが、そのばかげたことをどこから始めればよいかさえわかりません。

この男にも同様の質問があったようですが、答えはうまくいきませんでした。

フィドル

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;
}
4

3 に答える 3

0

ここにはいくつかの問題があります

問題の 1 つ$(this).position().topは、div ごとに 0 を返すことです (固定されているため)。実際の css 値を解析する必要があります。

fadeIn()2 つ目は、関数およびの性質にあります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();
        });
    });
});
于 2013-10-08T22:07:25.597 に答える