Как сделать такую анимацию в алфавитном списке?

Question

[Hlib]

Здравствуйте
Идея состоит в том, чтобы при скролле алфавитного списка, буква, на которую начинается данная группа контактов, оставалась на верху, но как только скролл 'сближает' текущую букву, со следующей, текущая буква скролится наверх, а на ее место становится новая буква.

Можно сказать, следующая буква выталкивает текущую букву

Надеюсь эту шизофазию вы смогли разобрать.

Так вот, как легче всего это реализовать? В какую сторону смотреть?
Пробовать все делать через проверку, не соприкасаются ли пиксели букв?

Answer 1

[LaraLover]

А просто на флексах и sticky-top? пример на бутстрапе 4

<div class="container">
  <div class="row">
    <div class="col-2">
      <p class="sticky-top">A</p>
    </div>
    <div class="col-10">
      <p>AA</p>
      ...
      <p>AZ</p>
    </div>
  </div>
  <div class="row">
    <div class="col-2 sticky-top">
      <p class="sticky-top">B</p>
    </div>
    <div class="col-10">
      <p>BA</p>
      ...
      <p>BZ</p>
    </div>
  </div>
  <div class="row">
    <div class="col-2 sticky-top">
      <p class="sticky-top">c</p>
    </div>
    <div class="col-10">
      <p>CA</p>
      ...
      <p>CZ</p>
    </div>
  </div>
</div>