Stellar.js問題與位置

Question

我試圖使用Stellar.js做視差效果，但數據恆星比=「」標籤正在讓我的元素脫位。我有這樣的代碼：

<div class="slider" id="yours" data-slide="3" data-stellar-background-ratio="0.5"> 
<div class="container"> 
<div class="outer-ring" data-stellar-ratio="0.6"> 
<div class="inner-ring" data-stellar-ratio="-0.6" data-stellar-vertical-offset="0"> 
<div class="core" data-stellar-ratio="-0.3" data-stellar-vertical-offset="0"></div></div></div></div></div> 

與這些CSS：

.outer-ring { 
    width: 635px; 
    height: 635px; 
    background: url(../img/conheca/wheel-1.png) no-repeat; 
    position: absolute; 
    top: 50%; 
    margin-top: -317px; 
    left: 50%; 
    margin-left: -317px; 
} 

.inner-ring { 
    width: 478px; 
    height: 478px; 
    background: url(../img/conheca/wheel-2.png) no-repeat; 
    position: relative; 
    margin: 0px auto; 
} 

.core { 
    width: 360px; 
    height: 360px; 
    background: url(../img/conheca/wheel-3.png) no-repeat; 
    position: relative; 
    margin: 0px auto; 
} 

當恆星「數據比」不在標籤，它非常適合，但是當我把這個參數，它改變了「 。內環和內核的頂部。

我有一個這樣的問題與水平定位，.container div有「邊距：0汽車」和子元素脫離div，而它有「位置：相對」，但我砍掉了「邊緣」在Stellar腳本中的一段代碼，它的工作。

對不起，如果我有點困惑，但這件事情讓我瘋狂，因爲我一直遵循的教程（http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax -scrolling-website-using-stellar-js /）沒有提到這一點，也沒有提到Stellar.js網站。謝謝。

Answer 1

確保所有父元素都有position: relative？

此外，您還可以設置調用腳本的時候偏移，如果你只打算一起工作垂直滾動，你可以簡單地關閉水平滾動：

$(window).stellar({ 
    horizontalScrolling: false, 
    verticalOffset: 0, 
    horizontalOffset: 0 
    }); 

祝你好運！

Answer 2

試試這個教程： http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/

我發現stellar.js糙米呢。

Answer 3

我在這裏回答了類似的問題 - stellar.js background image position issue

基本上它的，因爲你必須在恆星功能水平滾動條設置爲「真」。