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

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

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

Reference
  • Вопрос задан
  • 100 просмотров
Подписаться 1 Средний Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
  • Skillfactory
    Профессия Веб-разработчик
    12 месяцев
    Далее
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 2
@ForSureN1
frontend dev
// 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'
            });
        }
    }
Ответ написан
Комментировать
imko
@imko
Senior Scratch Developer
Следить за секциями. При попадании очередной в область просмотра, у всех снимаешь активность, ей ставишь
Пункты в оглавлении делай ссылками просто, ничего добавлять не придется, он так же отработает при прокрутке на якорь
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы