Если элемент виден больше 5 секунд, добавить к нему класс. Как реализовать?

Question

[LoveCodeandCoffe]

нужно через jquery сделать так, что если. Подвал/footer. Попадает в экран и пользователь смотрит на него больше 5 секунд( ну т.е подвал в видимости экрана больше 5 секунд). То к подвалу должен добавляться класс.

Answer 1

[LoveCodeandCoffe]

Вот нашел для себя подходящий код только на js . он делает проверку виден элемент или нет. Как теперь написать условие, что если элемент виден определенное время добавлять к нему класс, и убирать если элемент, снова стал не виден

var element = document.querySelector('#cop');

var Visible = function (target) {
  // Все позиции элемента
  var targetPosition = {
      top: window.pageYOffset + target.getBoundingClientRect().top,
      left: window.pageXOffset + target.getBoundingClientRect().left,
      right: window.pageXOffset + target.getBoundingClientRect().right,
      bottom: window.pageYOffset + target.getBoundingClientRect().bottom
    },
    // Получаем позиции окна
    windowPosition = {
      top: window.pageYOffset,
      left: window.pageXOffset,
      right: window.pageXOffset + document.documentElement.clientWidth,
      bottom: window.pageYOffset + document.documentElement.clientHeight
    };

  if (targetPosition.bottom > windowPosition.top && // Если позиция нижней части элемента больше позиции верхней чайти окна, то элемент виден сверху
    targetPosition.top < windowPosition.bottom && // Если позиция верхней части элемента меньше позиции нижней чайти окна, то элемент виден снизу
    targetPosition.right > windowPosition.left && // Если позиция правой стороны элемента больше позиции левой части окна, то элемент виден слева
    targetPosition.left < windowPosition.right) { // Если позиция левой стороны элемента меньше позиции правой чайти окна, то элемент виден справа
    // Если элемент полностью видно, то запускаем следующий код
    console.clear();
    console.log('Вы видите элемент :)');
  } else {
    // Если элемент не видно, то запускаем этот код
    console.clear();
  };
};

// Запускаем функцию при прокрутке страницы
window.addEventListener('scroll', function() {
  Visible (element);
});

// А также запустим функцию сразу. А то вдруг, элемент изначально видно
Visible (element);

Comments

[LoveCodeandCoffe]

Егор Скороходов, Спасибо. Подходит

[LoveCodeandCoffe]

Егор Скороходов, А нет не совсем. Класс не исчезает, если элемент был виден, но стал невиден.

Answer 2

[Stopy]

var timeout;

function myFunc(){    
  if (Visible(element)){

    if ( !timeout ) {
        timeout = setTimeout(function(){
            // add класс куда надо
        }, 5000);
    }

  } else {

    clearTimeout(timeout)

  }
}

myFunc();

window.addEventListener('scroll', function() {
    myFunc();
});

Только перепиши чтобы Visible() возвращал true или false