JSFiddle - React, Tailwind, and code Playground

by night11

HTML

<ul>
<li id="one" data-color="#16A085">
<h2>Section One</h2>
</li>
<li id="two" data-color="#C0392B">
  <h2>Section Two</h2>
</li>
<li id="three" data-color="#ff44AD">
  <h2>Section Three</h2>
</li>
<li id="four" data-color="#f88f18">
  <h2>Section Four</h2>
</li>
<li id="five" data-color="#E91E63">
  <h2>Section Five</h2>
</li>

</ul>

CSS

li {
  display: block;
  width: 100%;
  height: 100vh;
}
body {
  background: #16A085;
  color: #fff;
  margin: 0;
  transition: all 550ms ease;
  will-change: background;
}

JavaScript

$(window).on("scroll touchmove", function() {

  if ($(document).scrollTop() >= $("#one").position().top) {
    $('body').css('background', $("#one").attr("data-color"));
  };

  if ($(document).scrollTop() > $("#two").position().top) {
    $('body').css('background', $("#two").attr("data-color"))
  };

  if ($(document).scrollTop() > $("#three").position().top) {
    $('body').css('background', $("#three").attr("data-color"))
  };
  
  if ($(document).scrollTop() > $("#four").position().top) {
    $('body').css('background', $("#four").attr("data-color"))
  };
   if ($(document).scrollTop() > $("#five").position().top) {
    $('body').css('background', $("#five").attr("data-color"))
  };
  
});