Соберите список контактов, в котором буква группы остаётся сверху, пока имена прокручиваются под ней. Для заголовка достаточно
position: sticky и top: 0, но его движение ограничивает родительский блок.Оберните каждую группу вместе с заголовком в отдельный контейнер. Когда контейнер уйдёт за верхнюю границу, его заголовок освободит место следующему. Самому списку задайте высоту и вертикальную прокрутку. Непрозрачный фон не даст тексту просвечивать, а
z-index разместит заголовок поверх строк.В интерактивных примерах с HTML и CSS можно сравнить два варианта: заголовки сменяют друг друга или накапливаются сверху. Повторите оба и уберите обёртки групп: так сразу станет видно, как структура страницы задаёт границы
position: sticky.