jquery scrolly: start position

Question

I was experimenting with the parallax-example of scrolly/jquery & have one problem, I can't solve:

I set the parallax bg-imges to fullscreen with 'center center' & cover, but as soon as scrolling starts, they're repositioned.Scrolling should start on the original position though.

css

 section {
 min-height: 1000px;
 position: relative;
 width: 100% !important;
 min-width: 1000px;
 margin: 0;
 padding: 0;
 overflow: hidden;
 }
 section:nth-of-type(1){background:whitesmoke;height:200px;}
 section:nth-of-type(2){background:black;height:1600px;}

#bottle>div:nth-of-type(1){
background-image: url(../img/bottle.jpeg);
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
margin: 0;
height: 1200px; 
position:absolute;
top:0;left:0;
width:100%;   
}
#bottle>div:nth-of-type(2) {
background: url(../img/nike.png);
background-position: center center; 
background-size: ; 
background-repeat: no-repeat; 
background-attachment: fixed;
margin: 0;
height: 1600px; 
position:absolute;
top:0px;left:0px;
width:100%;
}
#story-freext>div:nth-of-type(1) {
background-color: red; 
margin: 0;
height: 1600px;
position:absolute;
width:100%;
top:0;left:0;
}
section h1{color:#4F9426;width:300px;font-size:65px;margin-bottom:14px;}
section p{color:black;width:300px;}
section article{ position:absolute;top:40px;left:40px;width:900px;z-index:4;}
.parallax-item{position:absolute;z-index:5;top:40px;left:400px;}

html

 <section id="bottle">
 <article>Blabla</article>
 <div class="parallax" data-velocity="-.3"></div>         
 <div class="parallax" data-velocity="-.5" data-fit="525"></div>
</section>

<section id="story-freext">
 <div class="parallax" data-velocity="0"></div>
</section>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="../jquery.scrolly.js"></script>
<script>
$(document).ready(function(){
   $('.parallax').scrolly({bgParallax: true});
});
</script>

What am I missing here?

Answer 1

You need to amend two of your CSS classes which seem to be causing the problem.

The background position is not set correctly so when the parallax JS comes into effect, it jumps to where parallax is expecting it to start.

#bottle>div:nth-of-type(1) {
  background-image: url(../img/bottle.jpeg);
  background-position: 50% 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  height: 1200px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#bottle>div:nth-of-type(2) {
  background: url(../img/nike.png);
  background-position: 50% 525px;
  background-size: ;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  height: 1600px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}