Получите видимую высоту элемента вместо его фактической высоты с помощью jquery

Этот пост связан с этим. Пожалуйста, прочтите и его. :-)

В сообщении, на которое я ссылался, я понял, что решение моей проблемы будет состоять в том, чтобы изменить цель ссылки, если видимая высота div больше, чем у другого div. В моем макете все элементы div, о которых я говорю, имеют высоту 1100 пикселей. Но это не то, что я хочу получить. Я бы хотел, чтобы скрипт получал высоту div, которая в данный момент видна посетителю, а не ее реальную высоту. Есть ли способ сделать это с помощью jQuery?

Заранее спасибо!


html jquery height visible
person Tom S.    schedule 02.01.2013    source источник
comment
Что вы пробовали? Проверьте функцию jQuery.offset() вместе с информацией об области просмотра и высоте элемента, которая поможет вам разобраться. Просто вопрос сложения и вычитания.   -  person Pablo    schedule 02.01.2013
comment
Вы когда-нибудь догадывались об этом? Я пытаюсь сделать то же самое, и мне не повезло.   -  person JacobTheDev    schedule 16.07.2014

Ответы (3)


arrow_upward
8
arrow_downward

Что вы можете сделать, так это взять позицию элементов в верхнюю часть родительского контейнера, а затем вычесть ее из высоты родительского контейнера. Это даст вам видимую высоту элемента.

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

Вот скрипта, показывающая это.

person Blake Plumb    schedule 02.01.2013
comment
Я никогда раньше не использовал .offset, поэтому, прежде всего, спасибо за ваш ответ, который меня кое-чему научил. :-) Пытался что-то придумать по вашему методу, но к сожалению не получилось. Допустим, у меня есть 3 элемента div высотой 1100 пикселей. Таким образом, весь мой документ имеет высоту 3300 пикселей. Что я хотел сделать, так это рассчитать расстояние между верхней частью последнего div и верхней частью документа, а затем изменить цель моей ссылки в соответствии с результатом. Итак: предупреждение (3300 - $('#div3').offset().top) - person Tom S.; 02.01.2013
comment
Когда я был в верхней части документа, он вернул 1100, чего я и ожидал. Но потом я прокрутил немного вниз, запустил скрипт, но он все равно вернул 1100. Я думал, что он выдаст мне число, которое будет выше 1100, но этого не произошло. Итак, я думаю, что .offset не совсем то, что я думал, и просто не адаптируется к текущему местоположению прокрутки. :-/ - person Tom S.; 02.01.2013
comment
@ТомС. добавьте $(window).scrollTop() к своему предупреждению, и оно даст вам то, что вы хотите. скрипка - person Blake Plumb; 02.01.2013
comment
Фантастика! Опять же, я не знал, что вы можете сделать это. Теперь я думаю, что смогу использовать это, чтобы соответствующим образом адаптировать ссылку. Большое спасибо! :-) - person Tom S.; 02.01.2013

arrow_upward
1
arrow_downward

Оберните содержимое области просмотра DIV другим DIV. Нацельте этот DIV на чтение высоты всего содержимого как такового:

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

Макет:

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

Надеюсь это поможет. Удачи.

person Bryan Allo    schedule 02.01.2013

arrow_upward
-1
arrow_downward

Вы должны использовать фиксированную высоту 1100 пикселей? Потому что вы также можете указать максимальную высоту: 1100 пикселей; и высота: 100%; В зависимости от того, что вы хотите поместить в div, вы, конечно, можете получить текущую высоту с помощью

$('.divclass').height();
person gulty    schedule 02.01.2013