Прилипающее позиционирование.
Свойство position:sticky

Исходный код этого примера:

<style>
    .frame {
        border: 1px solid #3d7e9a;
        padding: 20px;
        width: 300px;
        height: 200px;
        margin-left: 20px;
    }
    .frame > div {
        width: 100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
    }
    dl {
        margin: 0;
        padding: 0;
    }
    dt {
        background: #b8c1c8;
        border-bottom: 1px solid #989ea4;
        border-top: 1px solid #717d85;
        color: #fff;
        font: bold 18px/21px Arial, sans-serif;
        margin: 0;
        padding: 2px 0 0 12px;
        position: -webkit-sticky;
        position: sticky;
        top: -1px;
    }
    dd {
        font: bold 20px/45px Arial, sans-serif;
        margin: 0;
        padding: 0 0 0 12px;
        white-space: nowrap;
    }
    dd + dd {
        border-top: 1px solid #ccc;
    }
</style>
<div class="frame">
    <div>
        <dl>
            <dt>А</dt>
            <dd>Адам</dd>
            <dd>Александр</dd>
            <dd>Алексей</dd>
            <dd>Анатолий</dd>
            <dd>Антон</dd>
            <dd>Артем</dd>
        </dl>
        <dl>
            <dt>Б</dt>
            <dd>Богдан</dd>
            <dd>Борис</dd>
            <dd>Борислав</dd>
            <dd>Бронислав</dd>
        </dl>
        <dl>
            <dt>В</dt>
            <dd>Вадим</dd>
            <dd>Валентин</dd>
            <dd>Валерий</dd>
            <dd>Василий</dd>
            <dd>Вениамин</dd>
            <dd>Виктор</dd>
            <dd>Владимир</dd>
        </dl>
        <dl>
            <dt>Г</dt>
            <dd>Геннадий</dd>
            <dd>Георгий</dd>
            <dd>Герман</dd>
            <dd>Глеб</dd>
            <dd>Григорий</dd>
        </dl>
    </div>
</div>