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

我正在使用jQuery库stellar.js在我正在构建的网页上创建一些视差样式滚动。到目前为止，我一直没有遇到什么问题，但有一个我无法解决的问题。使用Stellar.js视差插件出现奇怪的位置问题

我有4个divs，它们充当视差的幻灯片，其宽度和高度均为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：

enter image description here

有没有人对此有所了解？

来源

2013-03-06 devoncrazylegs

我已经成功解决了这个问题，任何遇到类似问题的人都会遇到。

此问题是由水平滚动造成的被启用，并且可以通过使可以解决你的恒星函数调用这个样子的：

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

}）;

来源

2013-03-06 16:56:32 devoncrazylegs

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

hideDistantElements：假这是设置为false参数。如果它被设置为真正它将应用显示：无当元素是视区之外。

来源

2015-11-26 04:37:35

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

回答

相关问题