javascript - prev - Obtenga la altura visible de un div con jQuery

jquery selector

Question

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

Digamos que tengo un div rojo dentro de un contenedor negro:

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

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

Ahora, una vez que el usuario ha pasado por el div, volvería a informar 248.

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

Tengo un poco de una 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 es 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 de la div, calcule el espacio entre ella y la parte inferior de la ventana.

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

¡Gracias!

ACTUALIZACIÓN: me di cuenta 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);
        }
    }
});

Answer 1

Calcule la cantidad de píxeles que un elemento (altura) tiene en la ventana gráfica

Demo Fiddle

Esta pequeña función devolverá la cantidad de px un elemento 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));
}

Use como:

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

Eso es.

jQuery .inViewport()

demo jsFiddle

de lo anterior puedes extraer la lógica y crear un plugin 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));

Use 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 el scroll ventana y el resize pero tambié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 .

Answer 2

Aquí hay un concepto rápido y sucio. Básicamente, compara el offset().top del elemento con la parte superior de la ventana y el offset().top + height() hacia 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);

Ejemplo de violín

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

Answer 3

Aquí hay una versión del enfoque de Rory anterior, excepto que está escrito para funcionar como un plugin 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