使用Stellar.js视差插件有奇怪的位置问题

Question

我正在使用jQuery库stellar.js在我正在构建的网页上创建一些视差样式滚动。到目前为止，我一直没有遇到什么问题，但是我似乎无法解决这个问题。

我有4个div作为视差的幻灯片，宽度和高度为100％，因此它填满了屏幕。然后我在内部使用一个设置宽度（940px）的“包装”，以便将视差元素包含在其中，这将阻止不同显示器尺寸之间出现任何问题。

我遇到的问题是，当我给这个包装器中的任何元素提供一个“数据 - 恒星比率”时，除了一个之外，它会导致元素的行为不同，并且在调整窗口大小时，它们的位置不同，例如在不同尺寸的显示器上观看它：

以下是我的代码示例：

HTML

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
  <div class="wrapper">
    <img src="images/slide1/big_solution_button.png" data-stellar-ratio="1" data-stellar-vertical-offset="-45"alt="">
    <img src="images/slide1/tailored_text.png" data-stellar-ratio="1" data-stellar-vertical-offset="-35"alt="">
    <img src="images/slide1/button.png" data-stellar-ratio="2" data-stellar-vertical-offset="35"alt="">
    <img src="images/slide1/blur_button.png" data-stellar-ratio="0.5" data-stellar-vertical-offset="35"alt="">
  </div>    
  <a class="button" data-slide="2" title=""></a>
</div>

的CSS：

有人对此有任何见解吗？

Answer 1

我已经设法为将来遇到类似问题的任何人解决了这个问题。

此问题是由启用水平滚动引起的，可以通过使Stellar函数调用看起来像这样解决：

$.stellar({
   horizontalScrolling:false
   // other options...

}）;

Answer 2

$( window).stellar({
    horizontalScrolling:false,
    hideDistantElements: false
});

hideDistantElements：false 这是设置为false的参数。如果设置为 true ，当元素位于视口之外时，它将应用 display：none 。