Меню липких ссылок с реакцией-пересечением-наблюдателем ⇐ CSS

[Anonymous]

Я пытаюсь создать липкое меню со ссылками, используя React-Intersection-Observer для просмотра на мобильных устройствах.
При прокрутке раздела со ссылками я хочу, чтобы весь раздел был исправлен, чтобы он выглядел как пользователь только сам прокручивает ссылки. Активная ссылка будет выделена жирным шрифтом или другим цветом, чтобы ее было видно. При просмотре последних ссылок раздел должен выйти из фиксированного/закрепленного положения и продолжить движение вперед.
Проблемы, с которыми я сталкиваюсь в настоящее время:

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

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

Подробнее здесь: https://stackoverflow.com/questions/786 ... n-observer