Ottieni altezza visibile di un elemento invece della sua altezza effettiva con jquery

Question

Questo post è correlato a this one. Si prega di prendere in considerazione anche la lettura. :-)

Nel post a cui ho collegato, ho pensato che la soluzione al mio problema sarebbe quella di cambiare il target di un collegamento se l'altezza visibile di un div è maggiore di quella di un altro div. Nel mio layout, tutte le div che mi riferisco hanno un'altezza di 1100 px. Ma non è quello che voglio ottenere. Mi piacerebbe che lo script ottenga l'altezza del div attualmente visibile al visitatore, non la sua altezza reale. C'è un modo per farlo usando jQuery?

Grazie in anticipo!

Answer 1

Avvolgere il contenuto del DIV viewport con un altro DIV. Indirizza il DIV per leggere l'altezza di tutti i contenuti in questo modo:

JQuery: $ ('div # contents'). Height();

Disposizione:

<div id="viewport"> 
    <div id="contents">...all your div contents...</div> 
</div> 

Spero che questo aiuti. In bocca al lupo.

Answer 2

Devi utilizzare un'altezza fissa di 1100 px? Perché potresti anche specificare un'altezza massima: 1100 px; e un'altezza: 100%; A seconda di cosa si desidera inserire all'interno del div si può ovviamente ottenere l'altezza attuale

$('.divclass').height(); 

Answer 3

Che cosa si può fare è prendere la posizione elementi alla parte superiore del suo contenitore padre e quindi meno che da parte dei genitori altezza del contenitore. Questo ti darà l'altezza visibile dell'elemento.

$('#container').height() - $('#overflow').position().top 

Qui è un fiddle mostrando questo.