Мне нужно получить видимую высоту div в области прокрутки. Я считаю себя довольно приличным с jQuery, но это полностью меня отталкивает.

Допустим, у меня есть красный div внутри черной обёртки:

На рисунке выше функция jQuery вернула бы 248, видимую часть div.

Как только пользователь прокрутит верхнюю часть элемента div, как показано на рисунке выше, он выдаст сообщение 296.

Теперь, когда пользователь прокрутил мимо div, он снова сообщит 248.

Очевидно, что мои цифры не будут такими последовательными и понятными, как в этой демонстрации, или я бы просто жестко запрограммировал эти цифры.

У меня есть немного теории:

Получить высоту окнаПолучить высоту дивПолучить начальное смещение div из верхней части окнаПолучите смещение при прокрутке пользователя.Если смещение положительное, это означает, что вершина div все еще видна.если он отрицательный, верхняя часть div была затмлена окном. В этот момент div может занимать всю высоту окна, либо нижняя часть div может показыватьЕсли отображается нижняя часть элемента div, определите расстояние между ним и нижней частью окна.

Это кажется довольно простым, но я просто не могу обернуть голову вокруг этого. Я возьму еще один взлом завтра утром; Я просто подумал, что некоторые из вас, гении, могут помочь.

Спасибо!

ОБНОВЛЕНИЕ: я понял это самостоятельно, но похоже, что один из ответов ниже является более элегантным, поэтому я буду использовать это вместо этого. Для любопытных вот что я придумал:

$(document).ready(function() {
    var windowHeight = $(window).height();
    var overviewHeight = $("#overview").height();
    var overviewStaticTop = $("#overview").offset().top;
    var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
    var overviewStaticBottom = overviewStaticTop + $("#overview").height();
    var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
    var visibleArea;
    if ((overviewHeight + overviewScrollTop) < windowHeight) {
        // alert("bottom is showing!");
        visibleArea = windowHeight - overviewScrollBottom;
        // alert(visibleArea);
    } else {
        if (overviewScrollTop < 0) {
            // alert("is full height");
            visibleArea = windowHeight;
            // alert(visibleArea);
        } else {
            // alert("top is showing");
            visibleArea = windowHeight - overviewScrollTop;
            // alert(visibleArea);
        }
    }
});