多层视差滚动内容问题javascript

Question

我试图在我的网站上获得视差多层滚动部分，但似乎我的javascript存在问题。这是我关注的教程：How to make Multi-Layered Parallax Illustration with CSS & Javascript

我想要完全相同的行为只作为标题/英雄下面的一节。以下是我使用的代码：

 <section id="parallax-section">
        <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='parallaenter code herex'></div>
            <div class="layer-4 layer" data-depth='1.00' data-type='parallax'></div>
        </div>
    </section>  

但它确实可以正常工作，我认为它与移动或偏移有关，但我是一个新手

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);

我已经尝试将它作为英雄放在首位，没问题。这是一个截图。

如果有任何人可以提供帮助，我真的很感激。