視差滾動 - 停止元素後

我的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 +'%)' 
}); 


});

所以，我要的是，就當我滾動一切正常開始時，我移動.eboy和.eboy2 ，但在滾動1000px後，我想修復＃eboy2，並繼續只移動背景。所以IDE是「eBoy2」固定在頁面的midlle中，並且在它周圍應該傳遞一些元素。有人可以幫助我，這是最好的辦法嗎？

希望對此不是不恰當的問題。

來源

2016-06-14 Milan Poznan

我不太明白你在問什麼，但它聽起來像你所需要做的就是使用js來檢查滾動距離，然後在1000px時將其位置設置爲固定。

入住距離滾動：

$(window).scroll(function() { 

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

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

如果創建的jsfiddle我會很樂意幫助

來源

2016-06-14 13:11:54 user3683675

Probablly我需要somethig當你發佈。這裏是我的小提琴 https://jsfiddle.net/PoznanM/5v97bhj5/2/ 但它仍然看起來不一樣在我的本地主機和JS小提琴。但是，如果你能夠協助或幫助這一點，非常感謝你。如果不是，再次感謝。 –

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

});

在這到底是我的問題的解決方案，所以莫比這個答案將有助於有人。

來源

2016-06-14 14:06:28

視差滾動 - 停止元素後

回答

相關問題