Question

我正在尝试使用scrolly-jquery＆amp;的视差示例。有一个问题，我无法解决：

我将视差bg-imges设置为全屏，中心位置为＆＃39; ＆安培;封面，但一旦滚动开始，它们就会重新定位。但是，滚动应该从原始位置开始。

这是我得到的： http://theuniversebyear.com/para/example/index.html

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类。

背景位置未正确设置，因此当视差JS生效时，它会跳转到视差预期开始的位置。

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

jquery scrolly：开始位置

1 个答案: