Чтобы понять, вышел ли элемент за края экрана, необходимо сравнить на сколько сильно прокручен экран, с положением элемента в документе, и размерами элемента.
На просторах интернета был найден скрипт, который позволяет такую проверку выполнить. Этот скрипт немного расширил под свою задачу и привожу для вашего внимания:
(function($) {
$.extend($.expr[':'], {
'off-top': function(el) { // проверка того, что элемент достиг верха экрана
return $(el).offset().top < $(window).scrollTop();
},
'off-top-height': function(el) { // проверка того, что весь элемент ушел за верхний край экрана
return ($(el).offset().top+$(el).outerHeight()) < $(window).scrollTop();
},
'off-right': function(el) { // проверка того, что элемент ушел за правый край
return $(el).offset().left + $(el).outerWidth() - $(window).scrollLeft() > $(window).width();
},
'off-bottom': function(el) { // проверка того, что элемент ушел за нижний край
return $(el).offset().top + $(el).outerHeight() - $(window).scrollTop() > $(window).height();
},
'off-left': function(el) { // проверка того, что элемент ушел за левый край
return $(el).offset().left < $(window).scrollLeft();
},
'off-screen': function(el) { // элемент вышел из области видимости экран
return $(el).is(':off-top, :off-right, :off-bottom, :off-left');
}
});
})(jQuery);
Теперь, чтобы проверить, ушел ли элемент при скроллинге за верхнюю границу, проверяем:
$(document).ready(function () {
$(document).scroll(function () {
if($('div.some_element').is(":off-top-height")){
'Элемент вышел за верхний край экрана';
}
});
});
