divを1つずつフェードアウトする方法

Question

私はスクロール可能なラッパーの中に3つのdivを持っています。 "wrapper"からスクロールしたときに各divをフェードアウトさせたいのですが、にはが1つずつあります。

今私はスクロールすると同時に3つのdivがすべてフェードアウトします。私はこれを理解しようとかなりの時間を費やしましたが、まだ解決策を見つけていません。

TEST FIDDLE HERE

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    $(".title").css("opacity", 1 - $(window).scrollTop()/300); 
 
    }) 
 
});

body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    height: 1000px; 
 
    position: relative; 
 
} 
 

 
.title { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    background-color: #aaa; 
 
    height: 300px; 
 
    opacity: 1; 
 
    text-align: center; 
 
    font-family: 'helvetica'; 
 
    font-size: 80px; 
 
    font-weight: 100; 
 
    color: #fff; 
 
    top: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="title">Image 1</div> 
 
    <br> 
 
    <div class="title">Image 2</div> 
 
    <br> 
 
    <div class="title">Image 3</div> 
 
</div>

Answer 1

あなたはかなり近いですが、あなたは要素をループしており、ページの最上部には、それぞれのアカウントに自分の位置を取りますよ。

注：それは必要以上を発射可能性があるとして、通常はそれがここまで読んでみてください、スクロールイベントを聴いてこの種のものを行うには良い方法ではありません。https://www.sitepoint.com/throttle-scroll-events/

注2：私は.titlesをキャッシュされましたパフォーマンス上の理由から、$タイトル。

$(document).ready(function() { 
 
    var $titles = $(".title"); 
 
    $(window).scroll(function() { 
 
    $titles.each(function() { 
 
     $(this).css("opacity", 1 - ($(window).scrollTop() - $(this).position().top)/ 300); 
 
    }) 
 
    }) 
 
});

body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    height: 1000px; 
 
    position: relative; 
 
} 
 

 
.title { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    background-color: #aaa; 
 
    height: 300px; 
 
    opacity: 1; 
 
    text-align: center; 
 
    font-family: 'helvetica'; 
 
    font-size: 80px; 
 
    font-weight: 100; 
 
    color: #fff; 
 
    top: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="title">Image 1</div> 
 
    <br> 
 
    <div class="title">Image 2</div> 
 
    <br> 
 
    <div class="title">Image 3</div> 
 
</div>

Answer 2

はcss()代わりの値に関数を渡して試してみてください、とセットにインデックスに応じてそれを処理...しかし、あなたはあなたのセレクタによって返される要素の順序を確認する必要があり：

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    $(".title").css("opacity", function(idx, oldVal) { return (idx+1) - $(window).scrollTop()/300 }); 
 
    }) 
 
});

body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    height: 1000px; 
 
    position: relative; 
 
} 
 

 
.title { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    background-color: #aaa; 
 
    height: 300px; 
 
    opacity: 1; 
 
    text-align: center; 
 
    font-family: 'helvetica'; 
 
    font-size: 80px; 
 
    font-weight: 100; 
 
    color: #fff; 
 
    top: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="title">Image 1</div> 
 
    <br> 
 
    <div class="title">Image 2</div> 
 
    <br> 
 
    <div class="title">Image 3</div> 
 
</div>