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 part1A = 0;
let part1B = 0;
let part1C = 0;
let part1D = 0;
let hDoc = 0;
let scrollPos = 0;
let item1;
let item2;
let item3;
let item4;
$(function() {
  $(".classic, .holder, .holder__item").each(function() {
    hDoc += $(this).height();
  });
  $("body").height(hDoc);
  hPrev = $(".classic").height();
  itemHeight = $(".item1").height();
  part1A = Math.floor(hPrev + itemHeight);
  part1B = Math.floor(hPrev + itemHeight * 2);
  part1C = Math.floor(hPrev + itemHeight * 3);
  part1D = Math.floor(hPrev + itemHeight * 4);
  item1 = $(".item1");
  item2 = $(".item2");
  item3 = $(".item3");
  item4 = $(".item4");
  $(window).scroll(function() {
    count = 0
    Scroll();
    clearTimeout($.data(this, "scrollCheck"));
    $.data(this, "scrollCheck", setTimeout(function() {
      limit = 5
      Scroll();
      reAjust()
    }, 250));
  });
});



function reAjust() {
  timer = setInterval(function() {
  Scroll()
    //item1.css({
    //  transform: "translateY(-" + part1A + "px"
    //});
    console.log(limit)
    if (limit === 0) {
      clearTimeout(timer)
    } else {
      limit--;
    }
  }, 1000);
}


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