Как выглядит JQuery событие, которое реагирует на попадение контента в зону видимости?

Question

[Stone-Studio]

Итак, моя цель - это начало анимации при попадении определенного div'а в зону видимости пользователя. Существует-ли такое событие JQuery? Как оно выглядит?)

Answer 1

[Игорь Дерябин]

Есть плагин, который отслеживает попадание элементов во viewport: https://github.com/xobotyi/jquery.viewport

Answer 2

[aterentyev]

Использую вот такое расширение jQuery для проверки видимости элемента на экране (добыто где то на просторах stackoverflow):

$.fn.isOnScreen = function(){
    var viewport = {};
    viewport.top = $(window).scrollTop();
    viewport.bottom = viewport.top + $(window).height();
    var bounds = {};
    bounds.top = this.offset().top;
    bounds.bottom = bounds.top + this.outerHeight();
    return ((bounds.top <= viewport.bottom) && (bounds.bottom >= viewport.top));
};

Пример использования с underscore.js:

var isVisible = function(){
   return $('#selector').isOnScreen() // true or false
};

window.addEventListener('scroll', _.debounce(isVisible, 300), false);