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'
});