Для проверки того, попал ли какой-то конкретный элемент в область видимости пользователя, можно воспользоваться функцией:
<script>BX.checkPosition = function (container) {
// координаты дива
var div_position = container.offset();
// отступ сверху
var div_top = div_position.top;
// отступ слева
var div_left = div_position.left;
// ширина
var div_width = container.width();
// высота
var div_height = container.height();
// проскроллено сверху
var top_scroll = $(document).scrollTop();
// проскроллено слева
var left_scroll = $(document).scrollLeft();
// ширина видимой страницы
var screen_width = $(window).width();
// высота видимой страницы
var screen_height = $(window).height();
// координаты углов видимой области
var see_x1 = left_scroll;
var see_x2 = screen_width + left_scroll;
var see_y1 = top_scroll;
var see_y2 = screen_height + top_scroll;
// координаты углов искомого элемента
var div_x1 = div_left;
var div_x2 = div_left + div_width;
var div_y1 = div_top;
var div_y2 = div_top + div_height;
// проверка - виден див полностью или нет
if( div_x1 >= see_x1 && div_x2 <= see_x2 && div_y1 >= see_y1 && div_y2 <= see_y2 ){
// если виден
// container.css({'background-color': 'green'});
return true;
}else{
// если не виден
// container.css({'background-color': 'red'});
return false;
}
};</script>
Тогда, передавая, в цикле каждый из элементов представления можно проверить, был показан элемент пользователю, или нет.
Вызов функции в общем виде выглядит так:
<script>$(document).ready(function(){
$(document).scroll(function(){
// при скролле страницы делаем проверку
checkPosition($('#div_to_check'));
});
// после загрузки страницы сразу проверяем
checkPosition($('#div_to_check'));
// проверка при масштабировании и изменении размера страницы
$(window).resize(function(){
checkPosition($('#div_to_check'));
});
});</script>
В реальной задаче, конечно же, обработчик будет сложнее: нужно в цикле прогонять все элементы, которые нужно проверить и каждый элемент уже поотдельности проверять.
