Jqueryアニメーションdivのラッパーが上部に「消える」ようになったら

Question

ヘッダーがあります。そのヘッダーの下には、2つのdivが並んでいるラッパーがあります。私は右のdivがアニメーションされているラッパーが（＃wrapper）に属しているときに、ページの上部に「消える」ようにしたいと思います。 $（window）.scrollを試しましたが、ラッパーが一番上に消えなくてもアニメーションが始まるという問題があります。私は私の問題をはっきりと説明したかったと思うあなたの返信を先にありがとう。乾杯。マーク

マイHTML：

<div id="header"></div> 
    <div id="wrapper"> 
     <div id="contentWrapper"> 
      <div id="contentOne" class="content">This is contentOne</div> 
      <div id="contentTwo" class="content">This is contentTwo</div> 
      <div id="contentThree" class="content">This is contentThree</div> 
      <div id="contentFour" class="content">This is contentFour</div> 
     </div> 
    </div> 

マイCSS：

#header{ 
    width:960px; 
    height:300px; 
    background-color:rgba(1,1,1,0.3); 
    margin:5px auto;} 

#wrapper{ 
    width:960px; 
    height:auto; 
    margin:0 auto; 
    background-color:rgba(238,221,130,0.6); 
    border:5px solid purple; 
    overflow:hidden;} 

#contentWrapper{ 
    width:1910px; 
    height:auto; 
    background-color:rgba(70,130,180,0.4); 
    float:left; 
    position:relative;} 

.content{ 
    width:465px; 
    height:auto; 
    margin:10px 0 10px 10px; 
    padding:0; 
    background-color:rgba(205,92,92,0.4); 
    float:left;} 

#contentOne{ 
    height:2000px;} 

マイJS：

$(window).scroll(function() { 
    $("#contentTwo").stop().animate({ 
     "marginTop": ($(window).scrollTop() + 10) + "px" 
    }, "fast"); 
}); 

Answer 1

あなたはラッパの位置だけでなく、上のスクロールを考慮する必要があり窓。あなたの例のコードを使用して

http://jsfiddle.net/eqXMC/

修正JS：

$(window).scroll(function() { 

    var newMarginTop = Math.max(0, $(window).scrollTop() - $('#contentWrapper').offset().top) + 10; 

    $("#contentTwo").stop().animate({ 
     "marginTop": newMarginTop + "px" 
    }, "fast"); 
});