Javascript для обнаружения, если элемент больше не отображается из-за прокрутки

У меня есть слайд-шоу javascript в верхней части моей страницы. Когда слайд изменяется на следующее изображение, я вызываю другую функцию, чтобы изменить цвет фона на странице.

Клиент хочет, чтобы цвет фона переставал меняться, когда слайд-шоу больше не отображается, т.е. когда пользователь прокручивал страницу вниз.

Есть ли способ обнаружить, что элемент больше не отображается из-за прокрутки?

3 ответа

Вы можете использовать функцию jQuery $.scrollTop, возможно, из scroll обработчик события script.


Тестовый код в jQuery

function test() {
 var $elem = $('.test');
 var visibleAtTop = $elem.offset().top + $elem.height() >= $(window).scrollTop();
 var visibleAtBottom = $elem.offset().top <= $(window).scrollTop() + $(window).height();
 if (visibleAtTop && visibleAtBottom) {
 alert('visible');
 } else {
 alert('invisible (at ' + (visibleAtTop ? 'bottom' : 'top') + ')');
 }
}

Полный рабочий пример в http://jsfiddle.net/9PaQc/1/ (Обновлено: http://jsfiddle.net/9PaQc/2/)

P.S. Это проверяет только вертикальную прокрутку. Для горизонтального, просто сделайте то же самое с top замененным на left, YX и height()width()

ИЗМЕНИТЬ

Сделано полностью jQuery (чтобы обеспечить совместимость с x-браузером), изменив window.scrollY$(window).scrollTop()


Используйте window.pageYOffset, чтобы определить количество прокрутки в окне. Используйте текущее смещение объекта, чтобы проверить, находится ли он в поле зрения. Обратите внимание, что эти значения в основном зависят от браузера, поэтому сначала проверьте, существует ли он, затем действуйте на нем.

licensed under cc by-sa 3.0 with attribution.