查看一页网站的深度

// Количество секунд, когда будет определен лидер.
const REMAINING_TIME = 8;

// Параметры для наблюдателя.
const OPTIONS = {
  // Корневой элемент для пересечения видимости.
  // По умолчанию `viewport` документа.
  root: null,
  // Порог срабатывания наблюдателя за пересечением видимости.
  threshold: [0, .2, .4, .6, .8, 1]
}

// Выбираем секции, за которыми будем устанавливать наблюдения.
const SECTIONS = document.querySelectorAll('.intersection');

// Секции, как участники детской игры "Царь горы".
let conquerors = [];
// Текущий победитель.
let winner;
// Идентификатор таймера.
let timerId;
// Счетчик для таймера.
let remaining;

function decrement() {
  // Очищаем предыдущий таймер, чтобы не было зацикливаний.
  clearTimeout(timerId);

  if (remaining > 0) {
    timerId = setTimeout(decrement, 1000);
  } else {
    alert(`Прошло ${REMAINING_TIME} сек просмотра. Победитель: + ${winner.id}`);
  }

  // Распечатка результатов для демки.
  printResult();

  // Минусуем счетчик для таймера.
  remaining--;
}

// Обновление данных о секции в таблице секций.
function update(id, ratio, height) {
  // Текущая секция из таблицы секций.
  let conqueror = conquerors.find(i => id === i.id);

  conqueror.ratio = ratio.toFixed(4);
  conqueror.height = height.toFixed(4);

  // Обновим данные о победителе.
  // Победитель определяется по
  // максимально видимой высоте элемента.
  winner = conquerors.reduce(function(prev, curr) {
    return parseFloat(curr.height) > parseFloat(prev.height) ? curr : prev;
  });
}

// Функция обратного вызова для наблюдателя. Будет вызываться, когда
// каждый элемент из набора `entries`
// появляется и исчезает из области видимости.
function computedTimeOut(entries, observer) {
  entries.forEach(function(entry, index) {
    // Элемент, видимость которого изменилась.
    let element = entry.target;

    // Коэффициент пересечения текущего элемента с `viewport`.
    let ratio = entry.intersectionRatio;

    // Видимая высота элемента.
    let height = entry.intersectionRect.height;

    // Сохраним `id` текущего победителя до того, как обновим таблицу.
    let winner_id = winner ? winner.id : winner;

    // Обновим данные о секции в таблице секций.
    update(element.id, ratio, height);

    // Если секция попала в поле видимости.
    if (entry.isIntersecting) {
      // Визуализируем стиль секции.
      visualize(element, ratio);

      // Если победитель еще не был определен либо он сменился.
      if (!winner_id || winner.id !== winner_id) {
        // Сбрасываем счетчик на значение,
        // заданное в качестве шаблонного.
        remaining = REMAINING_TIME;

        // Запускаем таймер.
        decrement();
      }
    }
  });
}

// Создаем экземпляр наблюдателя за пересечением видимости элементов.
let visibleDetails = new IntersectionObserver(computedTimeOut, OPTIONS);

// Перебираем все секции.
SECTIONS.forEach(function(section, index) {
  // Устанавливаем наблюдателя за секцией.
  visibleDetails.observe(section);

  // Заполняем таблицу секций.
  // Используем атрибут `id` для идентификации элемента.
  conquerors.push({
    id: section.id,
    ratio: 0,
    height: 0
  });

  // Для демки добавим разную высоту секциям: < 1440px.
  section.style.height = Math.random() * 1440 + 'px';
})

/**
 * Дальше идут константы и функции, которые используются для демки.
 */

// Спаны для вывода коэффициентов пересечения.
const RATIO_SPANS = document.querySelectorAll('.intersection__ratio');

// Спан для вывода времени пересечения.
const TIMING_SPAN = document.querySelector('#intersection__timing');

// Спан для вывода таблицы секций.
const CONQUERORS_SPAN = document.querySelector('#intersection__conquerors');

// Спан для вывода победителя.
const WINNER_SPAN = document.querySelector('#intersection__winner');

// Визуализация наблюдений.
// Вызывается при изменении пересечений
// областей видимости секции с `vieport`.
function visualize(element, ratio) {
  let span = element.querySelector(".intersection__ratio");
  span.textContent = element.id + ' ' + (Math.floor(ratio * 100)) + "%";
  element.style.color = ratio > 0.5 ? '#fff' : '#bbb';
  element.style.backgroundColor = `rgba(195, 195, 195, ${ratio})`;
}

// Распечатка результатов для демки.
// Вызывается при изменении счетчика и таймера.
// Все переменные глобальные.
function printResult() {
  TIMING_SPAN.textContent = remaining > 0 ? remaining : 'Таймер остановлен.';
  CONQUERORS_SPAN.textContent = JSON.stringify(conquerors, null, 2);
  WINNER_SPAN.textContent = JSON.stringify(winner, null, 2);
}

body {
  margin: 0;
}

#app {
  max-width: 280px;
  margin: 0 auto;
}

#intersection__timing {
  position: fixed;
  top: 8px;
  left: 16px;
}

#intersection__winner {
  position: fixed;
  bottom: 8px;
  left: 16px;
  color: red;
  font-size: 18px;
}

#intersection__conquerors {
  position: fixed;
  top: 8px;
  right: 16px;
}

.intersection {
  height: 220px;
  border: 1px solid #ccc;
  text-align: center;
  font-family: cursive;
}

.intersection__ratio {
  position: sticky;
  top: 0;
}

<div id="app">
  <section id="first" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="second" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="third" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="fourth" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="fifth" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="sixth" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="seventh" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="eighth" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>

  <div id="intersection__timing"></div>
  <pre id="intersection__winner"></pre>
  <pre id="intersection__conquerors"></pre>
</div>