Как реализовать такой reading progress bar?

Question

[D]

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

Reference

Answer 1

[ForSureN1]

// navigation active links
    let menu = document.querySelector('.header__nav');
    let links = menu.querySelectorAll('.nav__list-link');
    window.addEventListener('scroll', function() {
        let pos = window.pageYOffset;
        for (let i = links.length - 1; i >= 0; i--) {
            let link = links[i];
            let target = document.querySelector(link.hash);

            if ((pos + window.innerHeight / 2) > target.offsetTop) {
                if (menu.querySelector('.menu__link-active')) {
                    menu.querySelector('.menu__link-active').classList.remove('menu__link-active');
                }
                link.classList.add('menu__link-active');
                break;
            } else if (pos < target.offsetTop) {
                if (menu.querySelector('.menu__link-active')) {
                    menu.querySelector('.menu__link-active').classList.remove('menu__link-active');
                }
            }
        }
    });
   document.addEventListener('click', function(e) {
        let link = e.target;

        if (link.classList.contains('nav__list-link')) {
            e.preventDefault();
            scrollToTarget(link.hash);
        }
    });

    if (location.hash !== '') {
        scrollToTarget(location.hash);
    }

    function scrollToTarget(id) {
        let target = document.querySelector(id);

        if (target !== null) {
            let pos = target.offsetTop - document.querySelector('header').offsetHeight;

            window.scrollTo({
                top: pos,
                behavior: 'smooth'
            });
        }
    }

Answer 2

[imko]

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