视差滚动：层之间不需要的间隙答案

【问题标题】：Parallax scrolling: Unwanted gap in between layers视差滚动：层之间不需要的间隙
【发布时间】：2018-01-18 04:06:51
【问题描述】：

在我的网站here 上，我使用 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);

HTML：

<div id='hero'>
  <div class='layer-bg layer' data-depth='0.10' data-type='parallax'></div>
  <div class='layer-1 layer' data-depth='0.20' data-type='parallax'></div>
  <div class='layer-2 layer' data-depth='0.50' data-type='parallax'></div>
  <div class='layer-3 layer' data-depth='0.80' data-type='parallax'></div>
  <div class='layer-overlay layer' data-depth='0.85' data-type='parallax'></div>
<!--   <div class='layer-4 layer' data-depth='0.90' data-type='parallax'></div> -->
  <div class='layer-logo layer' data-depth='0.95' data-type='parallax'> <a id='portfolio-button' href="http://www.reynelee.com/my-work/">View Work</a></div> <!-- my logo-->
<!--   <div class='layer-close layer' data-depth='1.00' data-type='parallax'></div> -->

</div>

【问题讨论】：

我会从console.log for 循环之前的所有变量开始，看看菜单扩展时是否有变化

标签： javascript html css web parallax

【解决方案1】：

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

#page {
  transform: translateX(0);
}

您会注意到在没有打开菜单的情况下会导致同样的问题。我之前遇到过这种情况，我忘记了该术语的实际名称，但是应用转换会导致浏览器以某种方式对其进行不同的处理。我的建议是在#page 元素上应用这个translateX(0)，并根据这个默认位置重新计算你的视差div 的位置。我知道这不是一个完整的答案，但它应该能让你继续前进。

【讨论】：