如何使用视差覆盖div中的所有元素

Question

我有一个正在制作的网站，我希望一个部分使用视差覆盖下一个。我有一个很好的背景图像视差，但我希望被覆盖的部分中的元素（文本，按钮，图像等）保持原位并被覆盖。

我已经把jQuery之类的东西弄乱了，但是它不能正常工作。 #ContentContainer2到达屏幕顶部后，应该将ParallaxContainer作为类添加到屏幕上。我似乎没有这样做，也没有看到任何错误。

var distance = $('#ContentContainer2').offset().top;

$(window).scroll(function() {
  if ($(this).scrollTop() >= distance) {
    $('#ContentContainer2').addClass("ParallaxContainer");
  }
});

html,
body {
  font-family: Open Sans;
  font-size: 18px;
  line-height: 28px;
}

h1 {
  letter-spacing: -15px;
  font-family: Open Sans;
  color: white;
  text-align: center;
  font-size: 200px;
  font-weight: 800;
  line-height: 200px;
}

.MainContainer {
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

#ContentContainer {
  position: relative;
  display: block;
  display: flex;
  flex: 1 0 auto;
  justify-content: center;
  align-items: center;
  background-color: white;
  z-index: 1;
  background: url(https://www.toptal.com/designers/subtlepatterns/patterns/sakura.png);
  background-color: rgb(250, 228, 216);
}

#ContentContainer2 {
  position: relative;
  display: block;
  background-color: white;
  z-index: 1;
}

#ContentContainer3 {
  position: relative;
  display: block;
  background-color: red;
  z-index: 1;
}

.Content {
  max-width: 750px;
  margin: 0 auto;
  padding: 75px 0;
}

p {
  margin: 75px 0;
}

.ParallaxContainer {
  position: relative;
  z-index: -1;
  height: 100vh;
  transform: translateZ(-100px) scale(101);
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="MainContainer">
  <div class="ParallaxContainer" id="ContentContainer">
    <h1>
      Aloha!
    </h1>
  </div>

  <div id="ContentContainer2">
    <div class="Content">
      <p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.</p>
    </div>
  </div>
  <div id="ContentContainer3">
    <div class="Content">
      <p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.</p>
    </div>
  </div>
</div>

（codepen）

有人可以向我解释为什么这行不通吗？