2015-05-20 6 views
0

Я хочу проверить, присутствует ли текущий элемент или нет. Я использую это условие, чтобы проверить, что:jQuery Получить текущую позицию сверху

if ($(window).scrollTop() > $('.element').offset().top) { 
    //show 
} 

Но проблема заключается в том, что $(window).scrollTop() дает разные результаты на разной высоте браузера (я использую FireFox, первый номер .scrollTop(), второй - .offset().top):

enter image description here

теперь я просто уменьшить высоту поджигатель (так полоса прокрутки уменьшается в размерах):

enter image description here

Так что я не могу использовать $(window).scrollTop(), чтобы узнать, как я прокрутил страницу.
Любые другие способы определения, существует ли элемент?

+0

Существует несколько плагинов, которые полезны для определения того, является ли элемент «в окне просмотра». Они очень приятные: https://github.com/morr/jquery.appear https://github.com/protonet/jquery.inview. Например, первый позволяет создавать такие вещи: '$ ('someselector'). Is (': появилось')' – pinturic

+0

Да, этот плагин может быть хорошим, я бы просто подумал о том, чтобы иметь 4kb (или ~ 1.5kb minified) код, чтобы проверить это. –

ответ

2

Вам нужно будет рассмотреть эти 4 базовых величин: высота

  • окна
  • прокрутки верхней части окна в
  • элемента смещения верхнего
  • высота Элемента

Исходя из этого, вам будут иметь:

var windowHeight = $(window).height(); 
var windowScrollTop = $(window).scrollTop(); 
var elementHeight = $(".element").height(); 
var elementOffsetTop = $(".element").offset().top; 

if ((elementOffsetTop <= windowScrollTop + windowHeight) && (elementOffsetTop + elementHeight >= windowScrollTop)) 
    console.log('Visible on viewport'); 

Обратите внимание, что с помощью этого алгоритма вы сможете проверить, является ли элемент видимым в окне просмотра, независимо от его высоты, и, что наиболее важно, учитывая случай, когда вы прокручиваете окно за элементом.

Будет указано, что элемент отображается, когда на видовом экране отображается самая высокая часть или самая низкая часть элемента.

Смежные вопросы