无法使jQuery.Parallax和jQuery.Skrollr协调工作。（当窗口滚动时，在背景中迭代。）

我正在给网站的视觉部分编码，我遇到了一个障碍。为了更好的兼容性，我尝试将其主要保留为CSS，但我确实希望使用一些jQuery：主要用于用户滚动窗口时，因此使用视差和Skrollr

众所周知，视差允许以相对于窗口本身滚动的速度滚动背景。这将生成三维平面的形状和效果。这就是为什么我使用视差：为了滚动某些背景，就好像它们在主要内容后面一样

Skroller在窗口滚动位置的特定点触发特定动画

我将两者结合使用是为了拥有一个动画背景，当用户滚动窗口时，该背景会产生动画，同时，以相对于窗口滚动的速度滚动。也许这个动画将有助于以更清晰的方式举例说明这一点：

正如您所看到的，当用户滚动主窗口时，内容（顶部窗口）会像往常一样滚动。但是，背景组（背景1、背景2和背景3）也会滚动，但滚动速度较慢（这是视差工作）。虽然您不能完全注意到此动画中的“较慢速度”，但您应该能够注意到，同时，当它们一致移动时，它们的显示从

块

到

无

，先是一个，然后是另一个，然后是另一个，等等，然后再回来，形成一个循环，当用户继续滚动时在所有这些背景中设置动画（这是Skrollr工作）

到目前为止，一切顺利。我在页面的上半部分有一组背景，一切都很顺利。然而，在某种程度上，我对第二组背景有问题。第二组显示如下图所示：各个背景层的

背景位置

（应始终从0开始）被向下推约200px，而不是一个在另一个之上。图像应该非常清楚地显示问题

如您所见，这两个背景（背景2和背景3）应该一个接一个地出现。然而，其中一层显然被踢得很低，其他位于顶部的单个bg层也是如此。只有第一层或最下面的层按其应有的方式显示

两个集合的HTML代码几乎相同（唯一的区别是集合1在一个通用包装DIV中，而集合2与

中的一样）：

HTML集1

<div id="head_wrapper">
  <div class="background_head bg1_1"></div>
  <div class="background_head bg1_2" data-0="display: none;"  data-50="display: block;" data-400="display: none;" data-450="display: block;" data-800="display: none;"></div>
  <div class="background_head bg1_3" data-0="display: none;" data-100="display: block;" data-350="display: none;" data-500="display: block;" data-750="display: none;"></div>
  <div class="background_head bg1_4" data-0="display: none;" data-150="display: block;" data-300="display: none;" data-550="display: block;" data-700="display: none;"></div>
  <div class="background_head bg1_5" data-0="display: none;" data-200="display: block;" data-250="display: none;" data-600="display: block;" data-650="display: none;"></div>
</div>

#top_wrapper {
  width: 100%;
  min-width: 1000px;
  position: relative;
  overflow: hidden;
}
#head_wrapper {
  position: relative;
  margin: 0 auto;
  width: 1133px;
  height: 733px;
}
.background_head {
  background-position: 50% 0;
  background-repeat: no-repeat;
  width: 1133px;
  height: 733px;
  position: absolute;
  top: 0;
  left: 0;
}
.bg1_1 {
  background-image: url(../img/bgs/bg1_1.jpg);
  z-index: 11;
}
.bg1_2 {
   background-image: url(../img/bgs/bg1_2.jpg);
   z-index: 12;
}
.bg1_3 {
   background-image: url(../img/bgs/bg1_3.jpg);
   z-index: 13;
}
.bg1_4 {
  background-image: url(../img/bgs/bg1_4.jpg);
  z-index: 14;
}
.bg1_5 {
  background-image: url(../img/bgs/bg1_5.jpg);
  z-index: 15;
}

CSS集2

.background_wrapper {
  position: relative;
  width: 1133px;
  height: 400px;
  margin: 0 auto;
}
.background_content {
  background-position: 50% 0;
  background-repeat: no-repeat;
  width: 1133px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
}
.bg2_1 {
  background-image: url(../img/bgs/bg2_1.jpg);
  z-index: 21;
}
.bg2_2 {
  background-image: url(../img/bgs/bg2_2.jpg);
  z-index: 22;
}
.bg2_3 {
  background-image: url(../img/bgs/bg2_3.jpg);
  z-index: 23;
}
.bg2_4 {
  background-image: url(../img/bgs/bg2_4.jpg);
  z-index: 24;
}
.bg2_5 {
  background-image: url(../img/bgs/bg2_5.jpg);
  z-index: 25;
}

skrollr.init({
  forceHeight: false,
  smoothScrolling: true
});

$(document).ready(function(){
  $('.bg1_1').parallax("50%", -0.75);
  $('.bg1_2').parallax("50%", -0.75);
  $('.bg1_3').parallax("50%", -0.75);
  $('.bg1_4').parallax("50%", -0.75);
  $('.bg1_5').parallax("50%", -0.75);
  $('.bg2_1').parallax("50%", -0.3);
  $('.bg2_2').parallax("50%", -0.3);
  $('.bg2_3').parallax("50%", -0.3);
  $('.bg2_4').parallax("50%", -0.3);
  $('.bg2_5').parallax("50%", -0.3);
})

最后，这是一个jQuery，它将视差和Skrollr绑定到所有这些好东西：

JQUERY集1和2

.background_wrapper {
  position: relative;
  width: 1133px;
  height: 400px;
  margin: 0 auto;
}
.background_content {
  background-position: 50% 0;
  background-repeat: no-repeat;
  width: 1133px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
}
.bg2_1 {
  background-image: url(../img/bgs/bg2_1.jpg);
  z-index: 21;
}
.bg2_2 {
  background-image: url(../img/bgs/bg2_2.jpg);
  z-index: 22;
}
.bg2_3 {
  background-image: url(../img/bgs/bg2_3.jpg);
  z-index: 23;
}
.bg2_4 {
  background-image: url(../img/bgs/bg2_4.jpg);
  z-index: 24;
}
.bg2_5 {
  background-image: url(../img/bgs/bg2_5.jpg);
  z-index: 25;
}

skrollr.init({
  forceHeight: false,
  smoothScrolling: true
});

$(document).ready(function(){
  $('.bg1_1').parallax("50%", -0.75);
  $('.bg1_2').parallax("50%", -0.75);
  $('.bg1_3').parallax("50%", -0.75);
  $('.bg1_4').parallax("50%", -0.75);
  $('.bg1_5').parallax("50%", -0.75);
  $('.bg2_1').parallax("50%", -0.3);
  $('.bg2_2').parallax("50%", -0.3);
  $('.bg2_3').parallax("50%", -0.3);
  $('.bg2_4').parallax("50%", -0.3);
  $('.bg2_5').parallax("50%", -0.3);
})

我相信这就是我所能展示给你们的。我希望它足够清晰。我今天一直在研究，似乎找不到任何关于这两个jQuery插件一起使用的参考资料。天知道Skrollr没有文档，至少我所知道的没有，所以在不分解代码的情况下很难弄清楚它是如何工作的。无论如何，这就是为什么我在这里问这个问题，因为显然还没有人遇到过这个问题……也许这两个插件不兼容……起初我会这么想，但因为我的一个背景设置工作正常，我猜问题要么是我刚才留下的所有东西中缺少的东西，请大家检查并帮助我或者…我不知道：还有别的

---

无论如何，你们的任何帮助都将不胜感激！

skrollr文档仅为动画而投票！否则我现在没有时间帮助。