Javascript 视差滚动：层间不需要的间隙

在我的网站上，我用CSS和Javascript实现了多层视差滚动。页面上下滚动，我有6个层都在视差中移动。每一层向后滚动的速度都比前一层稍慢

在我点击右上角的汉堡包菜单之前，这个实现一直有效

我不知道为什么幻灯片菜单弹出后，各层没有正确地堆叠在一起

以下是视差滚动的CSS：

.layer {
  background-position: bottom center;
  background-size: auto;
  background-repeat: no-repeat;
  width: 100%;
  height: 800px;
  position: fixed;
  z-index: -1;
}

.layer-bg {
  background-image: url("http://www.reynelee.com/wp-content/uploads/2017/12/layer1.png");
}

.layer-1 {
  background-image: url("http://www.reynelee.com/wp-content/uploads/2017/12/layer2.png\a     ");
  background-position: left bottom;
}

.layer-2 {
  background-image: url("http://www.reynelee.com/wp-content/uploads/2017/12/layer3.png");
}

.layer-3 {
  background-image: url("http://www.reynelee.com/wp-content/uploads/2017/12/layer4.png\a    ");
  background-position: right bottom;
}

以下是JS：

(function() {
  window.addEventListener('scroll', function(event) {
    var depth, i, layer, layers, len, movement, topDistance, translate3d;
    topDistance = this.pageYOffset;
    layers = document.querySelectorAll("[data-type='parallax']");
    for (i = 0, len = layers.length; i < len; i++) {
      layer = layers[i];
      depth = layer.getAttribute('data-depth');
      movement = -(topDistance * depth);
      translate3d = 'translate3d(0, ' + movement + 'px, 0)';
      layer.style['-webkit-transform'] = translate3d;
      layer.style['-moz-transform'] = translate3d;
      layer.style['-ms-transform'] = translate3d;
      layer.style['-o-transform'] = translate3d;
      layer.style.transform = translate3d;
    }
  });

}).call(this);

（函数（）{
window.addEventListener（'scroll'，函数（事件）{
变量深度，i，层，层，长度，移动，顶距，平移3d；
topDistance=this.pageYOffset；
layers=document.querySelectorAll（“[data type='parallax']”）；
对于（i=0，len=layers.length；i

HTML:

---

问题是由transform css属性引起的。例如，如果应用以下规则：

#page {
  transform: translateX(0);
}

---

您会注意到，在没有打开菜单的情况下，它会导致相同的问题。我以前遇到过这种情况，我忘记了术语的实际名称，但应用transform会导致浏览器以某种方式对其进行不同的处理。我的建议是在#page元素上应用此

translateX（0）

，并基于此默认位置重新计算视差div的位置。我知道这不是一个完整的答案，但它应该会让您继续。

我会从

控制台开始。记录for循环之前的所有变量，以查看在扩展菜单时是否有变化
#page {
  transform: translateX(0);
}