JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CHALLENGES</title>
    </head>
    <body class="one">
        
        <h1>Javascript Event Challenges: Challenge 29</h1>
        <p>Scroll Down!</p>
    </body>
</html>

CSS

body {
                height: 3000px;
                display:block;
            }

            .one {
                background-color: beige;
                transition: all 3s;
            }

            .two {
                background-color: blueviolet;
                transition: all 3s;
            }

            .three {
                background-color: coral;
                transition: all 3s;
            }

            .four {
                background-color: cornflowerblue;
                transition: all 3s;
            }

            .five {
                background-color: darkgoldenrod;
                transition: all 3s;
            }

JavaScript

var pageTop;
            var bodyTag = document.querySelector("body");

            window.addEventListener("scroll", function(e){

                pageTop = window.scrollY;

                switch(true) {
                    case pageTop < 500: bodyTag.className = "one"; break;
                    case pageTop < 1000: bodyTag.className = "two"; break;
                    case pageTop < 1500: bodyTag.className = "three"; break;
                    case pageTop < 2000: bodyTag.className = "four"; break;
                    default: bodyTag.className = "five";
                }
            });