Visibilidad del elemento de prueba en jQuery

Question

¿Cuál es la mejor manera de determinar si un elemento es realmente visible en la página? Al igual que en los píxeles se están cambiando tanto porque el elemento no está oculto a través de CSS y se encuentra en la parte visible de un área desplazable (la ventana o algún elemento de bloque desbordante)?

Imagino que tendré que comprobar primero .is (': hidden') contra el elemento y sus padres. Entonces necesitaría iterar a través de todos los padres y la ventana, verificando el desbordamiento de desplazamiento/automático/oculto, luego comparar la posición de desplazamiento y el tamaño del elemento principal con la posición y el tamaño del elemento original. Y también necesitaría verificar el posicionamiento absoluto y mirar los índices z también.

¿Hay alguna manera más fácil?

Answer 1

Hay un complemento para eso. jQuery inview event plugin

Answer 2

he implementado $.inside plugin, donde se puede especificar una ancestor, en su caso:

$('html').css('height', '100%'); // make `html` the height of the viewport 
$('#your-element').inside('html'); // compare `#your-element` to `html` 

volverá por ejemplo:

{ 
    left: 0.2, // your element is "x-inside" (because >0 and <1) 
    top: -2.3 // but is not "y-inside" (because <0) 
} 

consulte el archivo Léame para obtener más información.

En su caso, usted puede agregar control adicional de is(':hidden') y z-index

Espero que esto ayude.