當窗口底部通過一個點時，JavaScript會褪色

Question

我有一個div被另一個div覆蓋，我試圖讓窗口底部消失（揭示下面的div），一旦窗口底部大於一半DIV。一旦頂部碰到窗口頂部，我就可以讓它工作，但我從那時起編輯它，它不再工作。

這裏是一個的jsfiddle例如： http://jsfiddle.net/DnJ2z/676/

這裏是我的JavaScript代碼：

$(document).ready(function() { 
    var scrollBottom = $(window).scrollTop() + $(window).height(); 
    var middleofDiv = $("#redCover").offset().top + (document.getElementById('redCover').clientHeight/2); 
    $(window).scroll(function() { 
     if(scrollBottom > middleofDiv) { //scrolled past the other div? 
      $("#redCover").fadeOut(2000); //reached the desired point -- show div 
     } 
    }); 
    }); 

對於這個例子，我想它，以便當窗口的底部比一半，多綠色div，淡入淡出被觸發。作爲一個側面說明，我有三個Div + coveredDiv在頁面上，所有的類「背景」和「封面」。如果我能得到這個Javascript的工作，是否有辦法使它適用於所有的類而不是單個元素？

感謝您的幫助！

Answer 1

你的問題是，scrollTop()是不同的，這取決於你滾動到哪裏。你正在運行它onload，所以它總是一樣的。它需要在您的scroll事件中運行。試試這個：

$(function(){ 
    var rC = $('#redCover'), middleofDiv = rC.offset().top + (rC.height()/2); 
    $(window).scroll(function(){ 
    if($(window).scrollTop() + $(window).height() > middleofDiv){ 
     //scrolled past the other div? 
     rC.fadeOut(2000); //reached the desired point -- show div 
    } 
    }); 
}); 

Fiddle

按照承諾：

$(window).scroll(function(){ 
    var sT = $(window).scrollTop(), wH = $(window).height(); 
    $('.color').each(function(){ 
    var ths = $(this); 
    if(sT + wH > ths.offset().top + (ths.height()/2)){ 
     ths.fadeOut(2000); 
    }; 
    }); 
}); 

Fiddle

注意，你確實有#greenDiv周圍#redCover。