Как добавить индикацию текущего раздела в оглавлении?
Активный раздел в оглавлении подсвечивают, сравнивая текущий адрес или позицию скролла с пунктом меню и присваивая этому пункту класс активного состояния. Скрипт отслеживает перемещение по странице или смену якоря, а CSS задаёт визуальный маркер — цвет, жирность, фоновую плашку или боковую полосу. Для доступности к активному пункту добавляют атрибут aria-current со значением location или true.
Готовое решение строится на трёх этапах. Сначала пунктам оглавления присваивают data-атрибуты с идентификаторами разделов, затем через IntersectionObserver или обработчик scroll определяют, какой блок сейчас в зоне видимости, и переключают класс активного состояния. На третьем этапе синхронизируют подсветку с переходом по ссылке и кликом по самому оглавлению, чтобы индикация не сбивалась при быстром скролле или возврате назад.
Мини-чек-лист для проверки: активный пункт совпадает с видимым разделом при любом положении страницы, подсветка снимается с предыдущего пункта без задержки, оглавление остаётся читаемым на мобильных, ссылки работают как обычные якоря при отключённом JavaScript, а состояние не теряется после перезагрузки с якорем в адресе. Отдельный нюанс — порог срабатывания наблюдателя: слишком ранний переключает индикацию до появления раздела, слишком поздний оставляет подсветку на предыдущем пункте.
Если нужен предсказуемый результат без отладки самописных скриптов, такую индикацию внедряют под ключ: размечают разделы, настраивают наблюдатель под конкретную вёрстку, оформляют активное состояние по вашему дизайну и проверяют поведение на всех типах устройств.