Как сделать индикатор перехода по секциям на сайте?

Question

[Амир Давлатов]

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

Comments

[Ankhena]

Посмотрите любой fullpage вертикальный слайдер и стилизуйте под себя dots.

https://codepen.io/search/pens?q=fullpage+slider

[Амир Давлатов]

Ankhena, спасибо за совет

[Ankhena]

Амир Давлатов, ссылочку добавила.

Либо еще проще: добавлять класс в зависимости от величины прокрутки. Как нужная секция попадает в зону видимости (или какая-то ее часть, как удобнее), добавляете класс. И обратно.

Answer 1

[Арсений Матыцин]

1. Стоит начать с прослушивания прокрутки
2. Затем вычислять совпадает ли прокрутка с координатами секции.
3. При совпадении любым удобным способом получать индекс соответствующего элемента в твоей навигации (можно раздать через data-атрибуты, или просто ловить текущий индекс [поплохеет при разной вложенности]). И задавать ему класс (для подсветки).

Сама навигация должна быть размещена посредством position:fixed.