在jQuery上滾動淡入淡出div

Question

我有幾個div，它們基本上只是五顏六色的矩形，以幫助可視化。當我向下滾動頁面時，根據滾動條的位置，每個矩形應該爲fadeIn或fadeOut。不幸的是，它嚇壞了，褪色更像一個痙攣的閃光燈。我認爲，通過各種元素來確定不透明度水平會更好，我可以通過各種元素來確定不透明度，但我甚至不知道從哪裏開始討論這個愚蠢。

似乎this guy有一個類似的問題，但答案沒有奏效。

FIDDLE

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

Answer 1

你有幾個問題在這裏

一個問題問題是，$(this).position().top將返回0每個的div（由於其固定的特性）。你需要解析實際的css值。

第二個是功能fadeIn()和​​的性質。如果您對淡出的項目調用​​，那麼如果您在頁面上進行滾動，它會滯後。 但我沒有解決以下的問題。

因爲代碼路徑（應該）是互斥的，所以我在第一個if之後也放了else。

$(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(); 
     }); 
    }); 
}); 

Answer 2

的$(window).scroll()處理程序爲您單擊和向下滾動頁面，每一次執行，所以你推fadeIn()和​​呼叫噸到jQuery's animation queue。該解決方案是在if語句被檢查褪色是否已經發生的東西，如果是這樣避免增加其他的動畫隊列，所以東西大致是這樣的：

$(document).ready(function(){ 
    var $element_array = $("#content").find("div"); 
    var fades = 0; 
    $(window).scroll(function(){ 
     $element_array.each (function(){ 
      if (($(this).position().top + $(this).height()) < $(window).scrollTop() && (fades == 0)) 
       $(this).fadeIn(function(){fades = 1;}); 
      if (($(this).position().top + $(this).height()) > $(window).scrollTop() && (fades > 0)) 
       $(this).fadeOut(function(){ fades = 0; }); 
     }); 
    }); 
}); 

http://jsfiddle.net/ruXeq/4/

Answer 3

只是刪除從淡出狀態+高度（）的事情，因爲它沒有任何意義有

$(document).ready(function(){ 
    var remember = 0; 
    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) > $(window).scrollTop()) 
       $(this).fadeOut(); 
     }); 

    }); 
}); 

http://jsfiddle.net/ruXeq/5/

，它會像一個香草冰淇淋