jquery 滚动 : start position

Question

我正在试验 scrolly/jquery 的视差示例，遇到一个问题，我无法解决:

我将视差 bg-imges 设置为带有“中心中心”和封面的全屏，但是一旦滚动开始，它们就会重新定位。滚动应该从原始位置开始。

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>

我在这里错过了什么？

Answer 1

您需要修改两个似乎导致问题的 CSS 类。

背景位置设置不正确，所以当 parallax JS 生效时，它会跳到 parallax 期望它开始的位置。

#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%;
}