Проверка видимости элемента в jQuery

Question

Как лучше всего определить, действительно ли элемент виден на странице? Как в пикселях изменяются оба, потому что элемент не скрыт с помощью CSS , а находится в видимой части прокручиваемой области (окна или некоторого переполняющегося элемента блока)?

Полагаю, мне нужно сначала проверить .is (': hidden') на предмет и его родителей. Затем мне нужно будет перебрать все родительские элементы и окно, проверяя наличие переполнения scroll / auto / hidden, а затем сравнить позицию и размер прокрутки родительского элемента с позицией и размером исходного элемента. И мне также нужно проверить абсолютное позиционирование и посмотреть на z-индексы.

Есть ли более простой способ?

Answer 1

Есть плагин для этого. плагин jQuery inview

Answer 2

Я реализовал $. Внутри плагина , где вы можете указать ancestor, в вашем случае:

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

вернет например:

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

См. README для получения дополнительной информации.

В вашем случае вы можете добавить дополнительную проверку на is(':hidden') и z-index

Надеюсь, это поможет.