2

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

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

我遇到的问题是，当我给这个包装器中的任何元素一个“数据星比”时，它会导致元素在调整窗口大小时表现不同，并以不同的方式定位它们，例如查看它在不同尺寸的显示器上：

这是我的代码示例：

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：

在此处输入图像描述

有人对此有任何见解吗？

4

2 回答 2

7

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

此问题是由启用水平滚动引起的，可以通过使您的 Stellar 函数调用如下所示来解决：

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

});

于 2013-03-06T16:56:32.380 回答
4 
$( window).stellar({
    horizontalScrolling:false,
    hideDistantElements: false
});

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

于 2015-11-26T04:37:35.697 回答