視差スクロール - 中止後の要素

Question

視差スクロール要素に問題があります。

私のhtml：

<header> 
    <div class="container-fluid"> 
     <div class="section1"> 
     <img src="images/Untitled-1.png" alt="" class="img-responsive"> 
     </div> 
    </div> 
    <div class="section2"> 
     <div class="eboy" id="eboy"> 
     <div class="eboy2">    
     </div> 
     </div> 
    </div> 
</div> 
</header>   

マイCSS：

.section1 { 
width:100%; 
padding:0; 
margin:0; 
height:auto; 

position: relative; 
height: 800px; 
background-image: url("../images/head.png"); 
size: auto 600px; 
position: top-center; 
background-attachment: fixed; 
overflow: hidden; 
} 
.section1 img { 
width:100%; 
height:auto; 
} 

.eboy { 
width: 900px; 
height: 300px; 
background-image: url("../images/eboy.png"); 
background-repeat: no-repeat; 
background-position: bottom; 
position: absolute; 
margin-right: 50%; 
margin-top: 5%; 
} 

.eboy2 { 
width: 1100px; 
height: 300px; 
background-image: url("../images/eboy.png"); 
background-repeat: no-repeat; 
background-position: bottom right; 
position: absolute; 
margin-right:40%; 
margin-top: 5%; 
z-index: -100; 
} 

.section2 { 
width:100%; 
padding:0; 
margin:0; 
height:auto; 
position: relative; 
height: 646px; 
background-image: url("../images/dobrodosli01.png"); 

size: contain; 
position: top-center; 
z-index: -100; 
} 

.section2 img { 
width:100%; 
height:auto; 

} 
.section3 { 
height:200px; 
background-image: url("../images/kapija.png"); 
z-index: 100; 
} 

.section3 img{ 
position: relative; 
left: 0px; 
top: 0px; 
z-index: 100; 

} 

とJS：

$(window).scroll(function(){ 

var wScroll = $(this).scrollTop(); 

$('.eboy').css({ 
    'transform' : 'translate(0px, '+ wScroll /12 +'%)' 
}); 


}); 

それでは、私がしたいことはある、私はすべてがOKでスクロールすると初めには、I移動.eboyと.eboy2 1000ピクセルスクロールした後、＃eboy2を修正して、バックグラウンドのみを移動し続けます。だからideは "eBoy2"はページのmidlleで修正され、その周りにいくつかの要素を渡す必要があります。誰かが私にそれをする最善の方法であると私をasssistできますか？

これに間違いはありませんか？

Answer 1

私はあなたが求めているものが得られていませんが、スクロールの距離を確認してから1000pxに固定するようにjsを使用するだけです。

チェック距離がスクロール：あなたはjsFiddleを作成する場合

$(window).scroll(function() { 

    //if I scroll more than 1000px... 
    if($(window).scrollTop() > 1000){ 

     //Then change the elements position to fixed: 
     $("#element").css("position", "fixed"); 
    } 
}); 

が、私はこれが私の問題の解決策であるエンドで

Answer 2

$(window).scroll(function(){ 

var wScroll = $(this).scrollTop(); 


if($(window).scrollTop() > 800){ 


    $(".eboy").css({"transform" : "translateY(0px)"}); 
    $(".eboy").css("margin-top", wScroll-600+"px"); 

} 
else{ 
    $('.eboy').css({ 
    'transform' : 'translate(0px, '+ wScroll /12 +'%)' 
}); 
    $(".eboy").css("margin-top", "0px"); 
} 

}); 

を助けて幸せになるので、この答えはするのに役立ちますmabyう誰か。