JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="debug"></div>
	<div id="flag"></div>
</body>

CSS

body{
	background:#FF99FF;
	height:2000px
}
#flag {
    position   : absolute;
    top        : 800px;
    background : gold;
    height     : 50px;
    width      : 50px;
}

#debug {
    position : fixed;
    top      : 0;
    right    : 0;
    height   : 200px;
    width    : 200px;
    border   : 1px solid yellow;
    overflow : hidden;
}

JavaScript

var i = 0;
$(window).scroll(function() {
	var scrollTop     = $(window).scrollTop();
	var elementOffset = $('#flag').offset().top;
	var distance      = (elementOffset - scrollTop);

	if( distance < $(window).height() )
	{
		i++;
		$('#debug').css("background-color", "#ff0000");
		$('#debug').prepend('<p>Carregar mais conteĂşdo ' + i + '</p>');
	}
	else
	{
		$('#debug').css("background-color", "#ffffff");
	}
});