JSFiddle - React, Tailwind, and code Playground

by Hastig Z

HTML

<section id="about">
  <markercenter>1</markercenter><markerbottom>1</markerbottom>
</section>
<section id="services">
  <markercenter>2</markercenter><markerbottom>2</markerbottom>
</section>
<section id="gallery">
  <markercenter>3</markercenter><markerbottom>3</markerbottom>
</section>
<monitor></monitor>
<markerfixed></markerfixed>

<!--
-needs-
 - math isn't precise, need height +/- 1 here or there
 -prevent firing between scrolls before timer kicks in - fixed but now seems to sometimes stick after it centers.
 -trimming down and combining
 -currently works only for 3 sections, if more section added needs adjusting
-->

CSS

html, body {
  margin: 0;
  padding: 0;
}
section {
  position: relative;
}
markercenter, markerbottom, markerfixed, monitor {
  /* scaffolding, to be removed */
  display: flex; 
  justify-content: center; 
  align-items: center;
  height: 20px; width: 20px;
  font-size: 14px;
  color: white;
}
markercenter { 
  /* scaffolding, to be removed */
  /* these are here to judge center of screen for testing */
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: 50%; transform: translateX(-50%);
  background-color: black;
}
markerbottom { 
  /* scaffolding, to be removed */
  /* these are here to judge center of screen for testing */
  position: absolute;
  //top: 50%; transform: translateY(-50%);
  left: 50%; transform: translateX(-50%);
  bottom: -10px;
  height: 20px; width: 20px;
  font-size: 14px;
  color: white;
  background-color: black;
}
markerfixed {
  /* scaffolding, to be removed */
  /* these are here to judge center of screen for testing */
  position: fixed;
  top: 50%; transform: translateY(-50%);
  left: 50%; transform: translateX(-50%);
  height: 20px; width: 20px;
  background-color: rgba(251, 45, 45, 0.7);
}
monitor {
  /* scaffolding, to be removed */
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: 100px;
  padding: 2px 10px 0px 10px;
  font-size: 14px;
  color: white; font-weight: bold;
  background-color: black;
}
section {
  width: 100%;
	min-height: 100vh;
}
#about{
  background-color: hsla(182, 100%, 85%, 0.5);
}
#services{
  background-color: hsla(61, 99%, 59%, 0.5);
}
#gallery{
  background-color: rgba(195, 251, 45, 0.5);
}

JavaScript

$(function() {
  $(window).scroll(function() {
    $('monitor').html('SCROLLING');
    clearTimeout($.data(this, 'scrollCheck'));
    $.data(this, 'scrollCheck', setTimeout(function() {
      $('monitor').html('PAUSED');
      var sectionHeightHalf = $(window).height() / 2;
      var scrollTop = $(window).scrollTop();
      if (scrollTop <= sectionHeightHalf) {
        $('html, body').animate({
          scrollTop: $("#about").offset().top
        }, 300);
      } else if 
        (scrollTop >= sectionHeightHalf && 
         scrollTop <= ($(window).height() * 2 - sectionHeightHalf)) {
          $('html, body').animate({
            scrollTop: $("#services").offset().top
          }, 300);
        } else if (scrollTop >= ($(window).height() * 2 - sectionHeightHalf)) {
          $('html, body').animate({
            scrollTop: $("#gallery").offset().top
          }, 300);
        }
    }, 300) );
  });
});