<div class="stick-container">
  <h2 class="sticky">
    A
  </h2>
  <ul>
    <li>Aaron</li>
    <li>Andrew</li>
    <li>Arthur</li>
  </ul>
  <h2 class="sticky">
    B
  </h2>
  <ul>
    <li>Boris</li>
    <li>Brendan</li>
  </ul>
  <h2 class="sticky">
    C
  </h2>
  <ul>
    <li>Cortland</li>
    <li>Craig</li>
    <li>Curtis</li>
  </ul>
  <h2 class="sticky">
    D
  </h2>
  <ul>
    <li>Daniel</li>
    <li>Dakota</li>
    <li>Delilah</li>
    <li>Dory</li>
    <li>Duana</li>
    <li>Dusty</li>
    <li>Dylan</li>
  </ul>
</div>

.stick-container {
  padding: 0 8px;
  width: 200px;
  height: 200px;
  overflow-y: auto;
  border: 1px solid #333;
}
.sticky {
  position: sticky;
  top: 0;
  background-color: #EEE;
  border: 2px dashed black;
  padding: 8px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  border: 2px dashed blue;
  padding: 8px;
  margin: 8px 0;
}