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

基本上它的，因为你必须在恒星功能水平滚动条设置为“真”。