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

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

3 голосов
/ 08 июня 2011

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

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

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

Ответы [ 3 ]

4 голосов
/ 08 июня 2011

Тестовый код в 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, Y -> X и height() -> width()

EDIT

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

1 голос
/ 08 июня 2011

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

0 голосов
/ 08 июня 2011

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

...