距窗口顶部的视差偏移

Question

我正在使用以下视差效果，如果视差部分位于页面顶部，则该效果很好，因为最上面的图像会将图层隐藏在后面。

window.addEventListener('scroll', () => {
  let parent =  document.getElementById('parallax-container');
  let children = parent.getElementsByTagName('div');
  for(let i = 0; i < children.length; i++) {
    children[i].style.transform = 'translateY(-' + (window.pageYOffset * i / children.length) + 'px)';
  }
}, false)

@import url('https://fonts.googleapis.com/css?family=Markazi+Text|Raleway');


body {
  margin: 0;
}

#parallax-container {
  display: block;
  height: 750px;
}

#parallax-container div {
  position: fixed;
  top: 0;
  background-position: center !important;
  transform: translateY(0px);
  height: 750px;
  width: 100%;
}

#content {
  position: relative;
  background-color: #030f33;
  color: #ffffff;
  padding: 100px;
}

#content h1 {
  font-size: 100px;
  text-align: center;
  font-family: 'Markazi Text', serif;
}

#content p {
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
}

<div id="parallax-container">
  <div style="background: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/SkyBG.png);"></div>
  <div style="background: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/Clouds1.png);"></div>
  <div style="background: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/Clouds2.png);"></div>
  <div style="background: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/Clouds3.png);"></div>
  <div style="background: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/Moon.png)"></div>
  <div style="background: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/Hill.png)"></div>
</div>
  <div id="content">
  <h1>Parallax Effect</h1>
    <p>The parallax code is from Collin Delphia's CodePen <a href="https://codepen.io/Kikoku/pen/PWyyVg">here</a>.</p>
    <p>I created the artwork in Adobe Illustrator based on the Animal Silhouette Moonlight Vector Illustration - Illustrator Tutorial by tutvid <a href="https://www.youtube.com/watch?v=RtnCn65MdN0">here</a>.</p>
</div>

但是我需要在页面上的任何地方使用此效果，但是正如您从下面的示例中看到的那样，效果在页面下移后就下降了，我有一种感觉更改tranform的计算，但是我一辈子都无法弄清楚！

有人可以伸出援手吗？我只是不想像下面那样看到图层的底部。

window.addEventListener('scroll', () => {
  let parent =  document.getElementById('parallax-container');
  let children = parent.getElementsByTagName('div');
  for(let i = 0; i < children.length; i++) {
    children[i].style.transform = 'translateY(-' + (window.pageYOffset * i / children.length) + 'px)';
  }
}, false)

@import url('https://fonts.googleapis.com/css?family=Markazi+Text|Raleway');


body {
  margin: 0;
}

#parallax-container {
  display: block;
  height: 750px;
  margin-top:100vh;
  position: relative;
}

#parallax-container div {
  position: absolute;
  top: 0;
  background-position: center !important;
  transform: translateY(0px);
  height: 750px;
  width: 100%;
}

#content {
  position: relative;
  background-color: #030f33;
  color: #ffffff;
  padding: 100px;
}

#content h1 {
  font-size: 100px;
  text-align: center;
  font-family: 'Markazi Text', serif;
}

#content p {
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
}

<div id="parallax-container">
  <div style="background: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/SkyBG.png);"></div>
  <div style="background: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/Clouds1.png);"></div>
  <div style="background: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/Clouds2.png);"></div>
  <div style="background: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/Clouds3.png);"></div>
  <div style="background: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/Moon.png)"></div>
  <div style="background: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/Hill.png)"></div>
</div>
  <div id="content">
  <h1>Parallax Effect</h1>
    <p>The parallax code is from Collin Delphia's CodePen <a href="https://codepen.io/Kikoku/pen/PWyyVg">here</a>.</p>
    <p>I created the artwork in Adobe Illustrator based on the Animal Silhouette Moonlight Vector Illustration - Illustrator Tutorial by tutvid <a href="https://www.youtube.com/watch?v=RtnCn65MdN0">here</a>.</p>
</div>