JSFiddle - React, Tailwind, and code Playground

HTML

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="content">TEXT SHOULD APPEAR NOW</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="footer">FOOOOOOTER</div>

CSS

.content{
    position:absolute;
    top:200px;
    
    background:red;
}

JavaScript

$('.content').hide();
var target = $("#footer").offset().top-$(window).height();
var bflag = true;
$(document).scroll(function() {

    if ($(window).scrollTop() >= target) {
if(bflag) {
    	console.log("111111");
        $('.content').show('slow'); }
            bflag = false;
    }
});