Find the height between the top of a div and the bottom of the window

Question

With jQuery, how do I find the height between the top of any div, and the bottom of my viewport?

In my code, I need to find the distance between the top of the footer, and the bottom of the window, actively, while scrolling.

Any idea how to do this?

See [this](http://stackoverflow.com/questions/9880472/determine-distance-from-the-top-of-a-div-to-top-of-window-with-javascript) SO accepted answer, hope it would be of help. — philip oghenerobo balogun, Jan 26 '16 at 01:42

score 2 · Accepted Answer · answered Oct 28 '14 at 23:15

One simple approach:

function updateScroll () {
    // the div whose offset we're measuring:
    var measure = $('#measure'),
    // the height of the window:
        windowHeight = $(window).height(),
    // the scroll-distance of the window:
        scrollDistance = $(window).scrollTop(),
    // how far from the 'top' of the document the div element is:
        divOffsetTop = measure.offset().top,
    // scrollDistance + windowHeight gives measures how far from the 'top'
    // of the document the bottom of the viewport is, subtracting that from
    // the offset of the div gives the difference. I used Math.Abs() because
    // I didn't know if you wanted to know *just* how far, or if you
    // wanted to know if it was 'above' (-difference) or 'below' (+ difference)
    // the bottom of the viewport:
        delta = Math.abs(divOffsetTop - (scrollDistance + windowHeight));

    // setting the text of the div itself, you may want to put that someplace
    // else:
    $('#distance').text(delta + 'px');
}

// binding the function to the scroll event:
$(window).scroll(updateScroll);

JS Fiddle demo.

References:

Find the height between the top of a div and the bottom of the window

1 Answers1