Индикатор скролла на JS

Для создания индикатора скролла страницы добавим див с классом scroll-indicator. Расположим его фиксировано сверху страницы и стилизуем под линию, которая будет закрашиваться по мере скролла

<div class="scroll-indicator"></div>

.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  height: 6px;
  background-color: blue;
  width: 0;
}

Далее с помощью JS определяем длину страницы и при скролле высчитываем текущее позицию прокрутки и изменяем длину нашего дива в соответствии с прокруткой.

// Получаем высоту всей страницы
let totalHeight = document.body.scrollHeight;

// Обновляем значение высоты страницы при изменении размера окна
window.addEventListener("resize", function() {
  totalHeight = document.body.scrollHeight;
});

// Отслеживаем событие прокрутки страницы
window.addEventListener("scroll", function() {
  // Рассчитываем процент прокрутки страницы
  const scrollPercent = (window.pageYOffset / (totalHeight - window.innerHeight)) * 100;
  
  // Обновляем значение индикатора
  document.querySelector(".scroll-indicator").style.width = `${scrollPercent}%`;
});