Wyświetlenie widocznej wysokości elementu zamiast faktycznej wysokości za pomocą jquery

Question

Ten wpis jest powiązany z this one. Proszę również rozważyć przeczytanie tego. :-)

W poście, do którego dołączyłem, doszedłem do wniosku, że rozwiązaniem mojego problemu będzie zmiana celu łącza, jeśli widoczna wysokość elementu div jest większa niż wartość innego elementu div. W moim układzie wszystkie elementy div, o których mówię, mają wysokość 1100 pikseli. Ale to nie jest to, co chcę osiągnąć. Chciałbym, aby skrypt dostał wysokość elementu div, który jest obecnie widoczny dla odwiedzającego, a nie jego rzeczywistą wysokość. Czy istnieje sposób, aby to zrobić za pomocą jQuery?

Z góry dziękuję!

Answer 1

Zawiń zawartość rzutni DIV za pomocą innego DIV. Wybierz DIV, aby odczytał wysokość całej zawartości jako takiej:

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

Układ:

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

Nadzieja to pomaga. Powodzenia.

Answer 2

Czy musisz użyć stałej wysokości 1100px? Ponieważ możesz również określić maksymalną wysokość: 1100px; a wysokość: 100%; W zależności od tego, co chcesz umieścić wewnątrz div można oczywiście uzyskać bieżącą wysokość przez

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

Answer 3

Co można zrobić, to przyjąć pozycję elementów na szczycie jego kontenera nadrzędnego, a następnie minus go od rodziców wysokość pojemnika. To da ci widoczną wysokość elementu.

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

Oto fiddle pokazujący to.