使用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視差插件出現奇怪的位置問題

回答

相關問題