JSFiddle - React, Tailwind, and code Playground

by Luke Harby

HTML

<div id="wrapper"></div>

CSS

#wrapper {
    background: blue;
    height: 800px;
    width: 100%;
    transition:all 400ms ease-in;
}

#wrapper.scroll {
    background:red;
    transition:all 400ms ease-in;
}

JavaScript

jQuery(window).load(function () {
    $(window).scroll(function() {
        $("#wrapper").addClass('scroll');
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer',setTimeout(function() {
            $("#wrapper").removeClass('scroll');
        }, 250));
    });
});