Parallax Scrolling - Element nach der Zeit stoppen

Question

Ich habe Probleme mit Parallax Scrolling-Element.

Mein 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>   

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

} 

und JS:

$(window).scroll(function(){ 

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

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


}); 

Also, was ich will, ist, auf begining, wenn ich alles in Ordnung bewegen, ich bewegen .eboy und .eboy2 , aber nach 1000px Scrolling möchte ich # eboy2 beheben, und weiter nur Hintergrund verschieben. Also ist "eBoy2" in der Mitte der Seite fixiert und sollte einige Elemente passieren. Kann mir jemand assistieren, was ist der beste Weg, es zu tun?

Hoffnung zu diesem ist nicht unpassende Frage.

Answer 1

Ich verstehe nicht ganz, was Sie fragen, aber es klingt wie alles, was Sie tun müssten, ist js, um den Abstand von scroll zu überprüfen und dann seine Position auf fixed wenn auf 1000px setzen.

prüft Entfernung gescrollt:

$(window).scroll(function() { 

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

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

Wenn Sie eine jsFiddle erstelle ich glücklich sein würde

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

}); 

Am Ende ist diese Lösung für mein Problem zu helfen, so maby diese Antwort helfen jemand.