JSFiddle - React, Tailwind, and code Playground

by PatrickHume

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<section class="classic">

</section>
<section class="holder">
  <div class="holder__placeholder">
    <h2>Hello world.</h2>
    <p>Nice to see you again.</p>
  </div>
  <div class="holder__item item1">
    <p>hello part 1</p>
  </div>
  <div class="holder__item item2">
    <p>hello part 2</p>
  </div>
  <div class="holder__item item3">
    <p>hello part 3</p>
  </div>
  <div class="holder__item item4">
    <p>hello part 4</p>
  </div>
</section>

SCSS

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html,
body {
  height: 100%;
  scroll-behavior: smooth;
}
section {
  height: 100vh;
}
.classic {
  background-color: pink;
}
.holder {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  //   sets it as sticky so that we can have all the scroll space we need but still visually end on this section
  position: sticky;
  top: 0px;
  overflow: hidden;
  & h2 {
    font-size: 6rem;
  }
  &__item {
    height: 100vh;
    width: 100vw;
    position: absolute;
    &.item1 {
      height: calc(100vh - 80px) !important;
      top: calc(100vh - 80px) !important;
      border: 1px solid black;
      background-color: teal;
    }
    &.item2 {
      height: calc(100vh - 60px) !important;
      top: calc(100vh - 60px) !important;
      border: 1px solid red;
      background-color: crimson;
    }
    &.item3 {
      height: calc(100vh - 40px) !important;
      top: calc(100vh - 40px) !important;
      border: 1px solid purple;
      background-color: DarkSalmon;
    }
    &.item4 {
      height: calc(100vh - 20px) !important;
      top: calc(100vh - 20px) !important;
      background-color: tomato;
      border: 1px solid blue;
    }
  }
}

JavaScript

let limit = 5;
let timer = 0;
let hPrev = 0;
let itemHeight = 0;
let part1 = 0;
let part2 = 0;
let part3 = 0;
let part4 = 0;
let hDoc = 0;
let scrollPos = 0;
let item1 = null;
let item2 = null;
let item3 = null;
let item4 = null;
$(function() {
  $(".classic, .holder, .holder__item").each(function() {
    hDoc += $(this).height();
  });
  $("body").height(hDoc);
  hPrev = $(".classic").height();
  itemHeight = $(".item1").height();
  part1 = Math.floor(hPrev + itemHeight);
  part2 = Math.floor(hPrev + itemHeight * 2);
  part3 = Math.floor(hPrev + itemHeight * 3);
  part4 = Math.floor(hPrev + itemHeight * 4);
  item1 = $(".item1");
  item2 = $(".item2");
  item3 = $(".item3");
  item4 = $(".item4");
  window.addEventListener("scroll", Scroll, false);
});

function Scroll() {
  scrollPos = Math.floor($(document).scrollTop());
  if (scrollPos > hPrev &&
    scrollPos < part1) {
    item1.css({
      transform: "translateY(-" + Math.floor(scrollPos - hPrev) + "px"
    });
  }
  if (
    scrollPos > part1 &&
    scrollPos < part2
  ) {
    item2.css({
      transform: "translateY(-" + Math.floor(scrollPos - part1) + "px"
    });
  }
  if (
    scrollPos > part2 &&
    scrollPos < part3
  ) {
    item3.css({
      transform: "translateY(-" + Math.floor(scrollPos - part2) + "px"
    });
  }
  if (
    scrollPos > part3 &&
    scrollPos < part4
  ) {
    item4.css({
      transform: "translateY(-" + Math.floor(scrollPos - part3) + "px"
    });
  }
}