Determining the distance between the top of the page and the bottom of a div

Question

Using jQuery, how do I determine the height/distance between the very top of the browser window to the bottom of a div, such as a header. I'm using the following code:

$(window).resize(function() {
    $totalHeight = $(window).height();
    $headerHeight = $('header').height();
    $('#portfolio-info').css('height',($totalHeight - $headerHeight - 105) + 'px');
});

And I want to make sure that $headerHeight isn't always the same value, as you scroll away from the header it should decrease all the way down to zero.

Thanks!

Answer 1

This should work out for you.

$(window).resize(function() {
    var top = $(this).scrollTop(),
        bottomDiv = $('div').offset().top + $('div')[0].offsetHeight,
        distance = Math.max(0, (top - bottomDiv) * -1);
});