如何讓div一次淡出一個

Question

我有一個可滾動包裝器中的三個div。我想讓每個div在從「包裝器」滾動出來時逐漸淡出，每次只有一個。

現在我滾動時，所有三個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>