位置的Stellar.js问题

Question

我尝试使用Stellar.js来实现视差效果，但是data-stellar ratio=“”标记使我的元素偏离了位置。我有以下代码：

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

当“data-data”不在标签中时，它很适合，但当我放入这个参数时，它会改变.ner-ring和.core的"top“。

我在水平定位时遇到了这样的问题，.container div有"margin: 0 auto“，而它有"position: relative"，而子元素正在离开div，但我在优秀的脚本中去掉了"margin”代码段，它就起作用了。

如果我有点困惑，很抱歉，但这件事快把我逼疯了，因为我一直在学习的教程(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

基本上是因为你在stellar函数中将水平滚动设置为'true‘。