JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<div></div>

<h1 id="scroll-to">Hello!</h1>

CSS

div {
    height:800px;
    background:#dedede;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
.scrolled div {
    background-color: black;
}

JavaScript

$(window).scroll(function () {
    var hT = $('#scroll-to').offset().top,
        hH = $('#scroll-to').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    console.log((hT - wH), wS);
    if (wS > (hT + hH - wH)) {
        $("body").addClass("scrolled");
    } else {
        $("body").removeClass("scrolled");
    }
});