Как определить, находится ли элемент в видимой части экрана?

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

• верхнюю координату искомого элемента на странице;
• верхнюю координату текущей позиции экрана (она будет меняться по мере скроллинга);
• высоту окна;
• высоту элемента. 

У нас есть две ситуации с элементом: он может быть либо выше экрана, на котором мы сейчас находимся, либо ниже его. С этими двумя случаями мы и будем разбираться. Если ни то, ни другое не соблюдается, то элемент находится в видимой части. Теперь давайте проговорим сам алгоритм на словах. 

Элемент находится ниже видимой части экрана

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

Элемент находится выше видимой части экрана

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

Пишем код

Осталось только реализовать алгоритм всего вышеописанного: 

$(window).scroll(function() { // событие, которое отслеживает прокрутку
  var element = $('.about'); // сам элемент, который будем проверять
  var element_top = element.offset().top; // координата верхней позиции элемента
  var element_bottom = element.offset().top + element.height(); // координата нижней позиции элемента
  var w_height = $(window).height(); // высота окна
  if (($(window).scrollTop() < element_top - w_height) || ($(window).scrollTop() > element_bottom)) {
    console.log("Вне области видимости");
  } else {
    console.log("В области видимости");
  }
})