<ul class="sort-list">
  <li>
    <div class="group-title">A</div>
    <ul>
      <li>Apple</li>
      <li>Animal</li>
      <li>Apple</li>
      <li>Animal</li>
      <li>Apple</li>
      <li>Animal</li>
      <li>Apple</li>
      <li>Animal</li>
    </ul>
  </li>
  <li>
    <div class="group-title">B</div>
    <ul>
      <li>Banana</li>
      <li>Ball</li>
      <li>Banana</li>
      <li>Ball</li>
      <li>Banana</li>
      <li>Ball</li>
      <li>Banana</li>
      <li>Ball</li>
    </ul>
  </li>
  <li>
    <div class="group-title">C</div>
    <ul>
      <li>Cat</li>
      <li>Call</li>
      <li>Banana</li>
      <li>Ball</li>
      <li>Banana</li>
      <li>Ball</li>
    </ul>
  </li>
  <li>
    <div class="group-title">D</div>
    <ul>
      <li>Doll</li>
      <li>Dog</li>
    </ul>
  </li>
  <li>
    <div class="group-title">E</div>
    <ul>
      <li>Eye</li>
      <li>Egg</li>
      <li>Banana</li>
      <li>Ball</li>
      <li>Banana</li>
      <li>Ball</li>
    </ul>
  </li>
  <li>
    <div class="group-title">F</div>
    <ul>
      <li>Friend</li>
      <li>Folder</li>
    </ul>
  </li>
  <li>
    <div class="group-title">G</div>
    <ul>
      <li>Girl</li>
      <li>Golden</li>
      <li>Banana</li>
      <li>Ball</li>
      <li>Banana</li>
      <li>Ball</li>
    </ul>
  </li>
</ul>

ul {
  padding: 0;
  list-style: none;
  margin: 0;
}

.sort-list {
  height: 200px;
  overflow: auto;
}

.group-title {
  position: sticky;
  top: 0;
  background: #333;
  color: #fff;
  height: 30px;
  line-height: 30px;
  padding: 0 4px;
  + ul > li {
    padding: 4px 0;
    border-bottom: 1px solid #e0e0e0;
    &:last-child {
      border-bottom: none;
    }
  }
}