title: Parallax scrolling: Unwanted gap in between layers
body: <p>On my website <a href="http://www.reynelee.com" rel="nofollow noreferrer">here</a>, I implemented multi-layered parallax scrolling with CSS and Javascript. The page scrolls up and down, and I have 6 layers all moving in parallax. Each layer going back scrolls at a slightly slower speed than the layer in front. </p>
  
  <p>This implementation works until I click on the hamburger menu in the top right corner. </p>
  
  <p><a href="https://i.stack.imgur.com/NAjZV.png" rel="nofollow noreferrer">Image of the Bug</a></p>
  
  <p>I'm not sure why the layers are not stacked on top of each other properly once the slide menu flies out.</p>
  
  <p>Here is the CSS for the parallax scrolling:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>And here is the JS:</p>
  
  <pre><code>(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 &lt; 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);
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id='hero'&gt;
    &lt;div class='layer-bg layer' data-depth='0.10' data-type='parallax'&gt;&lt;/div&gt;
    &lt;div class='layer-1 layer' data-depth='0.20' data-type='parallax'&gt;&lt;/div&gt;
    &lt;div class='layer-2 layer' data-depth='0.50' data-type='parallax'&gt;&lt;/div&gt;
    &lt;div class='layer-3 layer' data-depth='0.80' data-type='parallax'&gt;&lt;/div&gt;
    &lt;div class='layer-overlay layer' data-depth='0.85' data-type='parallax'&gt;&lt;/div&gt;
  &lt;!--   &lt;div class='layer-4 layer' data-depth='0.90' data-type='parallax'&gt;&lt;/div&gt; --&gt;
    &lt;div class='layer-logo layer' data-depth='0.95' data-type='parallax'&gt; &lt;a id='portfolio-button' href="http://www.reynelee.com/my-work/"&gt;View Work&lt;/a&gt;&lt;/div&gt; &lt;!-- my logo--&gt;
  &lt;!--   &lt;div class='layer-close layer' data-depth='1.00' data-type='parallax'&gt;&lt;/div&gt; --&gt;
  
  &lt;/div&gt;
  </code></pre>