Intersection Observer для первого элемента во viewport'е

Есть вот такой референс:

Суть эффекта - на странице показаны года и какой-то контент (текст) к ним. При скролле страницы, выбирается самый первый из них, находящийся в области видимости, и к нему добавляется класс, на котором завязаны стили для его выделения.

Хочу реализовать его с помощью Intersection Observer.

В голову приходит только добавление класса заголовкам, находящимся в поле видимости (in-viewport), с помощью IO, а затем через каждые 50-100мс обновлять список всех активных заголовков и только первому в списке добавлять еще один класс (active), на котором уже завязаны стили для самого эффекта.

Возможны ли еще какие-то решения? Нужна помощь не столько в коде, сколько в правильном выборе подхода решения задачи.