JSFiddle - React, Tailwind, and code Playground

by letanure

HTML

<div id="pagina1" class="pagina loaded">pagina 1</div>
<div id="pagina2" class="pagina">pagina 2</div>
<div id="pagina3" class="pagina">pagina 3</div>
<div id="pagina4" class="pagina">pagina 4</div>
<div id="pagina5" class="pagina">pagina 5</div>

CSS

body, html{
    height: 100%;
    background-color: #ccc;
}
.pagina{
    background-color: #ddd;
    margin: 0 0 50px 0;
    height: 100%;
}

JavaScript

var windowHeight = $(window).height();
$(window).scroll( function(){
    var pagina = Math.ceil( $('body').scrollTop() / windowHeight +1 )
    if( !$('#pagina'+pagina).hasClass('loaded') ){
        $('#pagina'+pagina).addClass('loaded')
        console.log('Carrega pagina', pagina)
    }
})