JS在用户滚动时获取要更改的文本

Question

所以我试图模仿对this site的影响，当用户滚动到每个新项目时，文本在特定的像素点处发生变化，我想我的html和css已经下降，但是js我真的很困惑（初学者），以及如何定位我需要的特定css类。抱歉，如果我以错误的格式提交了这个，只是第二次发布。 感谢。

$(document).on("scroll", function () {
  
  var pixels = $(document).scrollTop();
  
  // $("div.progress div.bar").html(pixels + " pixels down")
    
  if (pixels < 50) {
    $("header").removeClass("hide")
  } else {
    $("header").addClass("hide")
  }
  
  if (pixels < 600) {
    $("body").css("background-color", "#ffffff")
  } else if (pixels < 1293) {
    $("body").css("background-color", "#a29c97")
  } else if (pixels < 2395) {
    $("body").css("background-color", "#d9dfe4")
  } else if (pixels < 3820) {
    $("body").css("background-color", "#fff0f0")
    } else if (pixels < 5115) {
    $("body").css("background-color", "#fff0f0")
  } else {
    $("body").css("background-color", "#cdccc7")
  }
  
  var windowHeight = $(window).height()
  var documentHeight = $(document).height()
  var difference = documentHeight - windowHeight
  
  var percentage = 100 * pixels / difference
  
  // $("div.progress div.bar").css("width", percentage + "%")
  
})

h1.sticky {
  pointer-events: none;
  width: 100%;
  position: fixed;
  z-index: 1;
  opacity: fixed;
  padding-top: 0 !important;
}

h1.master-title {
  margin-top: -28vw;
  margin-bottom: 7.8125vw;
  margin-left: -15vw;
}

.appear {
  opacity: 1;
  transition: 300ms opacity ease-in-out 100ms;
}

h1 {
  font-family: Roboto;
  font-size: 8vw;
  letter-spacing: 1vw;
  line-height: 13.28125vw;
  font-weight: bold;
  z-index: 1;
  color: #000;
}

h1.sticky .alfabet-characters {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
   <h1 class="master-title sticky appear appearing">
          <span class="title">TEXT TEST</span>
          <div class="alfabet-characters">
            <span>T</span>
            <span>E</span>
            <span>X</span>
            <span>T</span>
            <span>T</span>
            <span>E</span>
            <span>S</span>
            <span>T</span>
          </div>
        </h1>
        </section>