JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="measure"><span id="distance">0</span> from top border to bottom of window.</div>

CSS

div, span {
    margin: 0;
    padding: 0;
    border-width: 0;
    font-size: 1em;
    line-height: 1.4em;
}

span {
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    min-width: 3em;
    display: inline-block;
    text-align: right;
}

div {
    margin-top: 1000px;
    height: 200px;
}

JavaScript

function updateScroll () {
    var measure = $('#measure'),
        windowHeight = $(window).height(),
        scrollDistance = $(window).scrollTop(),
        divOffsetTop = measure.offset().top,
        delta = Math.abs(divOffsetTop - (scrollDistance + windowHeight));
    
    $('#distance').text(delta + 'px');
}

$(window).scroll(updateScroll);