Viewport Scroll finder

by meetaaronsilber

HTML

<div id="stats">
    <p id="resized">Win H: <span class="num"></span></p>
    <p id="docH">Doc H: <span class="num"></span></p>
    <p id="scrollY">Scroll Y: <span class="num"></span></p>
    <br/>
    <p id="boxDy">BoxDy: <span class="num"></span></p>
    <p id="boxDtop">Past BoxD? : <span class="tf"></span></p>
</div>
        
        <div id="boxA" class="box"></div>
        <div id="boxB" class="box"></div>
        <div id="boxC" class="box"></div>
        <div id="boxD" class="box"></div>
        <div id="boxE" class="box"></div>
        <div id="boxF" class="box"></div>
        <div id="boxG" class="box"></div>

CSS

#stats{ position: fixed; top: 0; left: 0;}

.box { height: 400px; width: 300px; background: red;}
.box:nth-child(even) { background: green; }
.box:nth-child(4n+2) { background: orange; }

.tf { position: fixed; top: 10px; right: 10px; display: block; width: 30px; height: 30px; background: red;}
.tf.true { background: green; }

JavaScript

var boxDy = $('#boxD').position();

$('#resized .num').append(window.innerHeight);
$('#docH .num').append($(document).height());
$('#scrollY .num').append(window.pageYOffset);

$('#boxDy .num').append(boxDy.top);

window.onresize = function(e){
    $('#resized .num').empty().append(window.innerHeight);
}
    
window.onscroll = function(e){
    $('#scrollY .num').empty().append(window.pageYOffset);

    if(window.pageYOffset > boxDy.top) {
        $('#boxDtop .tf').addClass('true');
    } else { 
        if($('#boxDtop .tf').hasClass('true')){
            $('#boxDtop .tf').removeClass('true');
        }
    }
}