Задать вопрос
@LoveCodeandCoffe

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

нужно через jquery сделать так, что если. Подвал/footer. Попадает в экран и пользователь смотрит на него больше 5 секунд( ну т.е подвал в видимости экрана больше 5 секунд). То к подвалу должен добавляться класс.
  • Вопрос задан
  • 228 просмотров
Подписаться 1 Средний Комментировать
Ответ пользователя LoveCodeandCoffe К ответам на вопрос (2)
@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);
Ответ написан