Stellar.js images disappear before they are in view

Question

EDIT: sample of the problem: https://codepen.io/wa23/pen/yooGyO Make the live render window as tall as possible to see the effect. Start scrolling from the picture of earth and by the time you get to the 3rd div, the image is already shifted so that it is almost out of view entirely.

I have 4 divs like so:

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

The first and third rectangular div will have a background image that is parallaxed via Stellar.js, with other two do no, IE, they are staggered.

The problem is, by the time I scroll to the 3rd div, stellar js has already put my background image way out of view, both of the stellar divs have this property:

background-position: 0px 745.5px; which is fine for the first div, since it is already out of the view frame, but doesn't work for the 3rd, because by the time you get there, it's background image has already been shifted vertically by 745px.

I tried using data-stellar-vertical-offset="some number" with different values for the offset, but it doesnt work consistently across all viewport heights. 1900 is what it takes for my 27 inch monitor, but it needs half that for my 15 inch laptop. I'm not sure what to do about this.

Answer 1

Here is you answer, Change those properties,

No.1 Set background-attachment: fixed;

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

No.2 in js,

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