Отслеживание видимости элемента на странице

Приветствую!

Сегодня хочу поделиться очень полезным скриптом — с его помощью можно отследить, появился ли элемент на экране. Это может пригодиться, например, для красивой анимации появления: когда пользователь прокручивает страницу до определённого блока, блок может плавно выезжать снизу или сбоку или просто появляться. Этот эффект всем знаком, его часто используют разработчики при создании сайтов, выглядит очень эффектно.

Суть в том, что нужно проверить, виден ли элемент на экране. Когда он станет полностью виден, будем менять его цвет. Элемент будет считаться невидимым, если хотя бы один его пиксель находится за пределами экрана.

Итак, приступим. Скрипт будет использовать библиотеку JQuery, поэтому не забываем её подключить. Вызов функции будет происходить в следующих случаях:

• при загрузке страницы
• при скроллинге
• при изменении размера окна браузера
• при масштабировании страницы

Скрипт определяет положение блока на странице и его размер, размер видимой области страницы и на какое количество пикселей была проскролена страница по вертикали и горизонтали. Используя данные о всех размерах и координатах, добавляем условие, с помощью которого определим видимость элемента. При выполнении условия сменим цвет блока с голубого на жёлтый.

Сначала зададим стили:

.block {
	width: 70%;
    height: 100px;
    background-color: #5bc0de;
	margin: auto;
    margin-top: 1000px; /* делаем большой отступ сверху, чтобы элемент оказался за нижней границей экрана */
    margin-bottom: 150px;
}

Далее добавляем наш элемент в тело страницы:

<div class="block"></div>

А теперь сам скрипт для определения видимости элемента на экране:

<script type="text/javascript">
function checkPosition(){
    // координаты дива
    var div_position = $('.block').offset();
    // отступ сверху
    var div_top = div_position.top;
    // отступ слева
    var div_left = div_position.left;
    // ширина
    var div_width = $('.block').width();
    // высота
    var div_height = $('.block').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 ){
        // если виден
        $('.block').css({'background-color': '#ffc600'});
    }else{
        // если не виден
        $('.block').css({'background-color': '#5bc0de'});     
    }
}
</script>
<script type="text/javascript">
    $(document).scroll(function(){
        // при скролле страницы делаем проверку
        checkPosition();
    });
     
    // после загрузки страницы сразу проверяем
    checkPosition();
     
    // проверка при масштабировании и изменении размера страницы
    $(window).resize(function(){
        checkPosition();
    });
</script>

Вот, собственно, и всё. Всем удачи и пока!