JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="info">
        Keep going...
    </div>
    <div id="content">
    </div>
    <div id="bottom">
        footer
    </div>
</body>

CSS

#content {
    background-color: #F5F4F2;
    width: 100%;
    height: 800px;
    display: block;
    text-align: center;
}

#bottom {
    background-color: #F6EBBC;
    width: 100%;
    height: 150px;
    display: block;
    text-align: center;
}

#info {
    background-color: #F6EBBC;
    box-shadow: 0 1px 15px -10px #000;
    position: fixed;
    top: 10px;
    right: 10px;
    left: 10px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}

body {
    font-weight: bold;
    font-family: sans-serif;
}
}

JavaScript

$(window).scroll(function() {
	scrollDistance = $(window).scrollTop() + $(window).height();
	footerDistance = $('#bottom').offset().top;
	
	if (scrollDistance >= footerDistance) {
		info("Success!");
	} else {
        info("Keep going...");
    }
})

function info(message) {
    $("#info").text(message);
}