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
 -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 scrolled() {
		$(this).on('scroll')[0].setTimeout(function(){
    	$('monitor').html('SCROLLING!');
    });
    $(this).off('scroll')[0].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);
          }
        $(this).on('scroll',scrolled);
    }, 1000)
}
$(window).on('scroll',scrolled);