Obtenga la altura visible de un div con jQuery

Necesito recuperar la altura visible de un div dentro de un área desplazable. Me considero bastante decente con jQuery, pero esto me está confundiendo por completo.

Digamos que tengo un div rojo dentro de una envoltura negra:

En el gráfico anterior, la función jQuery devolvería 248, la parte visible del div.

Una vez que el usuario se desplaza más allá de la parte superior del div, como en el gráfico anterior, informará 296.

Ahora, una vez que el usuario se haya desplazado más allá del div, volvería a informar 248.

Obviamente, mis números no serán tan consistentes y claros como lo son en esta demostración, o simplemente codificaría esos números.

Tengo un poco de teoría:

• Obtenga la altura de la ventana
• Obtenga la altura del div
• Obtenga el desplazamiento inicial del div desde la parte superior de la ventana
• Obtenga el desplazamiento a medida que el usuario se desplaza.
  • Si el desplazamiento es positivo, significa que la parte superior del div aún está visible.
  • si es negativo, la parte superior del div ha sido eclipsada por la ventana. En este punto, el div podría estar ocupando toda la altura de la ventana, o la parte inferior del div podría estar mostrando
  • Si se muestra la parte inferior del div, calcule el espacio entre él y la parte inferior de la ventana.

Parece bastante simple, pero no puedo entenderlo. Tomaré otro crack mañana por la mañana; Supuse que algunos de ustedes, genios, podrían ayudar.

¡Gracias!

ACTUALIZACIÓN: descubrí esto por mi cuenta, pero parece que una de las respuestas a continuación es más elegante, así que la usaré en su lugar. Para los curiosos, esto es lo que se me ocurrió:

$(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);
        }
    }
});

Aquí hay un concepto rápido y sucio. Básicamente, compara el offset().topdel elemento con la parte superior de la ventana y offset().top + height()con la parte inferior de la ventana:

function getVisible() {    
    var $el = $('#foo'),
        scrollTop = $(this).scrollTop(),
        scrollBot = scrollTop + $(this).height(),
        elTop = $el.offset().top,
        elBottom = elTop + $el.outerHeight(),
        visibleTop = elTop < scrollTop ? scrollTop : elTop,
        visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    $('#notification').text(visibleBottom - visibleTop);
}

$(window).on('scroll resize', getVisible);

Violín de ejemplo

editar : pequeña actualización para realizar también la lógica cuando se cambia el tamaño de la ventana.

Calcular la cantidad de px que tiene un elemento (altura) en la ventana gráfica

Demostración de violín

Esta pequeña función devolverá la cantidad de pxun elemento que es visible en la ventana gráfica (vertical) :

function inViewport($el) {
    var elH = $el.outerHeight(),
        H   = $(window).height(),
        r   = $el[0].getBoundingClientRect(), t=r.top, b=r.bottom;
    return Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H));
}

Usar como:

$(window).on("scroll resize", function(){
  console.log( inViewport($('#elementID')) ); // n px in viewport
});

Eso es.

jQuery .inViewport()Plugin

jsFiddle demo

de lo anterior puede extraer la lógica y crear un complemento como este:

/**
 * inViewport jQuery plugin by Roko C.B.
 * http://stackoverflow.com/a/26831113/383904
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el) {
       function visPx(){
         var elH = $(el).outerHeight(),
             H = $(win).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H)));  
       }
       visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));

Usar como:

$("selector").inViewport(function(px) {
  console.log( px ); // `px` represents the amount of visible height
  if(px > 0) {
    // do this if element enters the viewport // px > 0
  }else{
    // do that if element exits  the viewport // px = 0
  }
}); // Here you can chain other jQuery methods to your selector

sus selectores escucharán dinámicamente la ventana scrolly resizetambién devolverán el valor inicial en DOM listo a través del primer argumento de la función de devolución de llamada px.

Aquí hay una versión del enfoque de Rory anterior, excepto que está escrito para funcionar como un complemento de jQuery. Puede tener una aplicabilidad más general en ese formato. Gran respuesta, Rory, ¡gracias!

$.fn.visibleHeight = function() {
    var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop;
    scrollTop = $(window).scrollTop();
    scrollBot = scrollTop + $(window).height();
    elTop = this.offset().top;
    elBottom = elTop + this.outerHeight();
    visibleTop = elTop < scrollTop ? scrollTop : elTop;
    visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    return visibleBottom - visibleTop
}

Se puede llamar con lo siguiente:

$("#myDiv").visibleHeight();

jsFiddle