javascript - 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 进行视差处理，其他两个没有，IE，它们是交错的。

问题是，当我滚动到第 3 个 div 时，stellar js 已经把我的背景图像放在视野之外，两个 stellar div 都有这个属性:

background-position: 0px 745.5px; 这对第一个 div 没问题，因为它已经在 View 框架之外，但对第三个 div 不起作用，因为当你到达那里，它的背景图像已经垂直移动了 745px。

我尝试使用具有不同偏移值的 data-stellar-vertical-offset="some number"，但它无法在所有视口(viewport)高度上始终如一地工作。我的 27 英寸显示器需要 1900，但我的 15 英寸笔记本电脑需要一半。我不确定该怎么办。

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中的No.2，

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