Функция, проверяющая, попал ли элемент в область видимости пользователя

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

Для проверки того, попал ли какой-то конкретный элемент в область видимости пользователя, можно воспользоваться функцией:

<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>

В реальной задаче, конечно же, обработчик будет сложнее: нужно в цикле прогонять все элементы, которые нужно проверить и каждый элемент уже поотдельности проверять.

Количество показов: 50
21.01.2020

Возврат к списку

Разработка сайта

Подайте заявку на разработку сайта на базе готового решения от компании 1С-Битрикс или одного из партнеров компании. Максимально подробно опишите, чему будет посвящен сайт, если это интернет-магазин - что он будет продавать, нужна ли мультиязычность, будут ли разные типы цен (розница, опт, крупный опт), будет ли интеграция с 1С, будет ли выгрузка товаров на различные торговые площадки...

Сопровождение сайта

Вы можете подать заявку на сопровождение вашего сайта на базе 1С-Битрикс. Сопровождение включает в себя: проверка актуальности обновлений сайта, проверка актуальности резервной копии, консультации по сайту. Опишите в заявке, какие еще объемы планируются на сопровождении и на какой срок вы планируете заключить договор на сопровождение - мы подберем подходящий вам бюджет на сопровождение

Работы по сайту

Вы можете подать заявку на выполнение определенного объема работ по сайту. Опишите в заявке объем работ. Это может быть разработка какого-то нового функционала, доработки по имеющемуся функционалу, доработки под требования сео-специалистов. На основании заявки вам будет сформирован бюджет работ, а также названы сроки на выполнение тех или иных работ.