JSFiddle - React, Tailwind, and code Playground

HTML

<div id="abs"></div>sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />

CSS

#abs{
    position:fixed;
    top:10px;
    left:10px;
    border:1px solid red;
    background-color:#fff;
    font-weight:bold;
    width:50px;
    height:50px;
    color:black;
    overflow:hidden;
}

JavaScript

var counter = 0;
$(window).scroll(function(){
    $this = $(this);
    $body = $('body');
    var distance = $body.outerHeight() - $this.height() - $this.scrollTop();
    $('#abs').text( distance );
    if (distance < 20)
    {
     $('body').append( 'addition #' + (counter++) + '<br />' );
    }
});