Ottieni l'altezza visibile di un div con jQuery

Devo recuperare l'altezza visibile di un div all'interno di un'area scorrevole. Mi considero abbastanza decente con jQuery, ma questo mi sta completamente buttando fuori.

Diciamo che ho un div rosso all'interno di un wrapper nero:

Nel grafico sopra, la funzione jQuery restituirebbe 248, la parte visibile del div.

Una volta che l'utente scorre oltre la parte superiore del div, come nel grafico sopra, riporterà 296.

Ora, una volta che l'utente ha passato il div, riporterà di nuovo 248.

Ovviamente i miei numeri non saranno così coerenti e chiari come lo sono in questa demo, o farei semplicemente un codice per quei numeri.

Ho un po 'di teoria:

• Prendi l'altezza della finestra
• Ottieni l'altezza del div
• Ottieni l'offset iniziale del div dalla parte superiore della finestra
• Ottieni l'offset mentre l'utente scorre.
  • Se l'offset è positivo, significa che la parte superiore del div è ancora visibile.
  • se è negativo, la parte superiore del div è stata eclissata dalla finestra. A questo punto, il div potrebbe occupare l'intera altezza della finestra o potrebbe essere visualizzata la parte inferiore del div
  • Se la parte inferiore del div è visibile, calcola lo spazio tra essa e la parte inferiore della finestra.

Sembra piuttosto semplice, ma non riesco a capirlo. Domani mattina prenderò un altro crack; Ho solo pensato che alcuni di voi geni potessero essere in grado di aiutare.

Grazie!

AGGIORNAMENTO: L'ho capito da solo, ma sembra che una delle risposte seguenti sia più elegante, quindi la userò invece. Per i curiosi, ecco cosa ho pensato:

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

Ecco un concetto veloce e sporco. Fondamentalmente confronta la offset().topparte dell'elemento con la parte superiore della finestra e la offset().top + height()parte inferiore della finestra:

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);

Violino di esempio

modifica - piccolo aggiornamento per eseguire anche la logica quando la finestra viene ridimensionata.

Calcola la quantità di px di un elemento (altezza) nella finestra

Demo di violino

Questa piccola funzione restituirà la quantità di pxun elemento è visibile nella (verticale) Viewport :

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

Usa come:

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

questo è tutto.

jQuery .inViewport()Plugin

jsFiddle demo

da quanto sopra puoi estrarre la logica e creare un plugin come questo:

/**
 * 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));

Usa come:

$("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

i selettori ascolteranno dinamicamente la finestra scrolle resizerestituiranno anche il valore iniziale su DOM pronto attraverso il primo argomento della funzione di callback px.

Ecco una versione dell'approccio di Rory sopra, tranne che scritto per funzionare come plugin jQuery. Potrebbe avere un'applicabilità più generale in quel formato. Ottima risposta, Rory - grazie!

$.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
}

Può essere chiamato con quanto segue:

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

jsFiddle