JSFiddle - React, Tailwind, and code Playground

by Ryan Perez

HTML

<div id="blue"></div>
<div id="black"></div>
<div id="red"></div>

CSS

#blue {
  width:400px;
  height:800px;
  background:blue;

}
#black {
  width:400px;
  height:800px;
  background:black;

}

#red {
    width:400px;
  height:800px;
    background:red;
    margin-bottom:500px;

}

JavaScript

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= $('#blue').offset().top) {
        $('body').css('background-color', 'red');
    }
    if (scroll >= $('#black').offset().top) {
        $('body').css('background-color', 'blue');
    }
    if (scroll >= $('#red').last().offset().top) {
        $('body').css('background-color', 'green');
    }
});