淡出在頁面頂部，淡入底部

Question

我得到這個codepen：https://codepen.io/tobiasglaus/pen/NpVXRR
當我滾動第一部分淡出，第二個從這個代碼底部在逐漸消失：

$(window).scroll(function(){ 
    $(".top").css("opacity", 1 - $(window).scrollTop()/400); 
    }); 
$(window).scroll(function(){ 
    $(".bottom").css("opacity", 0 + $(window).scrollTop()/400); 
    }); 

但這只是一個滾動事件，只能與2個部分一起工作。有沒有辦法可以添加更多部分，並且當它們到達頂部並從底部淡入時它們就會淡出？

Answer 1

據我所知，你想要的東西是這樣的：當一個元素進入視口區域時，它會消失，當它從視口區域出來時，它應該淡出。

所以所有的事情都應該在窗口的onscroll事件中完成。要知道元素是否進出視口區域，我們需要知道其中的top和bottom（可以從其top及其height中計算），我們還需要了解視區的高度。這就是我們需要查明某個元素是處於視口區域還是視區外的情況。以下是詳細的代碼。注意：爲了簡單起見，我沒有在這裏提到視口高度的複雜性（我只是使用document.documentElement.clientHeight - 這應該適用於所有現代瀏覽器的最新版本）。

HTML：

<div class="fading"></div> 
<div class="fading"></div> 
<div class="fading"></div> 
<div class="fading"></div> 

CSS：

.fading { 
    border:1px solid red; 
    margin-bottom:10px; 
    height:500px; 
    background:green; 
} 

JS：

var fadings = $(".fading"); 
$(window).scroll(function(){ 
    //the viewport's height 
    var vpheight = document.documentElement.clientHeight; 
    //loop through all interested elements 
    fadings.each(function(){ 
    //get the rect of the current element 
    var r = this.getBoundingClientRect(); 
    //the current element's height 
    var thisHeight = $(this).height(); 
    //check if the element is completely out of the viewport area 
    //to just ignore it (save some computation) 
    if(thisHeight + r.top < 0 || r.top > vpheight) return true; 
    //calculate the opacity for partially visible/hidden element 
    var opacity = Math.max(0, Math.min(1, 
        (r.top >= 0 ? vpheight - r.top : thisHeight - Math.abs(r.top))/vpheight)); 
    //set the opacity 
    $(this).css("opacity", opacity); 
    });   
}); 

Demo