Visibilità elemento test in jQuery

Question

Qual è il modo migliore per determinare se un elemento è veramente visibile nella pagina? Come nei pixel vengono modificati sia perché l'elemento non è nascosto tramite CSS e si trova nella parte visibile di un'area scorrevole (la finestra o qualche elemento di blocco straripante)?

Immagino di dover prima controllare .is (': hidden') contro l'elemento e i suoi genitori. Avrei quindi bisogno di scorrere tutti i genitori e la finestra, controllando l'overflow scroll/auto/hidden, quindi confrontare la posizione e la dimensione dello scroll dell'elemento genitore rispetto alla posizione e alla dimensione dell'elemento originale. E dovrei anche controllare il posizionamento assoluto e guardare anche gli z-index.

C'è un modo più semplice?

Answer 1

C'è un plugin per questo. jQuery inview event plugin

Answer 2

Ho implementato $.inside plug-in, in cui è possibile specificare un ancestor, nel tuo caso:

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

tornerà ad esempio:

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

Vedere il README per maggiori informazioni.

Nel tuo caso è possibile aggiungere ulteriore controllo sulla is(':hidden') e z-index

Spero che questo aiuti.