$( document ).ready( function () {

    document.addEventListener( 'scroll', scrolled );
    document.addEventListener( 'resize', scrolled );

    let revealables = document.querySelectorAll( '.reveal' );
    let heights = $( document ).height() / ( revealables.length + 1 );
    let currentlyShowing = Math.round( window.scrollY / heights );

    for ( let i = 0; i < currentlyShowing; i++ ) {
        if ( i < parseInt( revealables.length ) ) {
            revealables[ i ].classList.add( 'active' );
        }
    }

    function scrolled() {
        heights = $( document ).height() / ( revealables.length + 1 );
        let regPos = Math.round( window.scrollY / heights );
        if ( regPos < currentlyShowing && regPos < parseInt( revealables.length ) ) {
            revealables[ regPos ].classList.remove( 'active' );
        } else if ( regPos > currentlyShowing && regPos < parseInt( revealables.length ) + 1 ) {
            revealables[ currentlyShowing ].classList.add( 'active' );
        }
        currentlyShowing = regPos;
    }
} );