Stellar.js圖像在查看之前就消失了

Question

編輯：問題示例： https : //codepen.io/wa23/pen/yooGyO使實時渲染窗口盡可能高以查看效果。 從地球圖片開始滾動，到第3格時，圖像已經偏移，因此幾乎完全看不見。

我有4個div，如下所示：

<div data-stellar-background-ratio="0.5"></div>
<div class="plain"></div>
<div data-stellar-background-ratio="0.5"></div>
<div class="plain"></div>

第一個和第三個矩形div的背景圖像將通過Stellar.js進行視差處理，而其他兩個div則不行，即IE，它們是交錯的。

問題是，當我滾動到第3個div時，恆星js已經使我的背景圖像看不見了，兩個恆星div都具有以下屬性：

background-position: 0px 745.5px; 這對於第一個div來說很好，因為它已經超出了視圖框架，但不適用於第三個div，因為到您到達那里時，它的背景圖像已經垂直移動了745px。

我嘗試使用data-stellar-vertical-offset="some number"對偏移使用不同的值，但是它不能在所有視口高度上一致地工作。 我的27英寸顯示器需要1900，但15英寸筆記本電腦則需要1900。 我不確定該怎么辦。

Answer 1

這是您的答案，更改這些屬性，

No.1設置background-attachment: fixed;

div:nth-of-type(odd) { 
  height: 150vh;
  width:100%;
  background-size: cover;
  background-repeat:no-repeat;
  background-attachment: fixed;
}

js中的第二名，

$.stellar({
horizontalScrolling:false,
scrollProperty: 'transform'
});