List with floating or sticky section headings

Ever wanted to create a list with floating or sticky headings for each section? You absolutely can, using some clever CSS tricks.
https://codepen.io/chalarangelo/pen/ExqjMaP
> [!NOTE]
>
> This article uses the semantic HTML <dl>, <dt>, and <dd> elements. You can easily replace them with your own HTML structure, as needed.

.floating-stack {
  overflow-y: auto;
}

.floating-stack > dl {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
}

.floating-stack dt {
  position: sticky;
  top: 0.5rem;
  grid-column: 1;
}

.floating-stack dd {
  grid-column: 2;
}

> [!NOTE]
>
> This article uses the semantic HTML <dl>, <dt>, and <dd> elements. You can easily replace them with your own HTML structure, as needed.
In order to create a list with floating headings for each section, you can use overflow-y: auto to allow the list container to overflow vertically. Then, use display: grid on the inner container (<dl>) to create a layout with two columns.
Set headings (<dt>) to grid-column: 1 and content (<dd>) to grid-column: 2. Finally, apply position: sticky and top: 0.5rem to headings to create a floating effect.
Similarly, for the sticky headings, you'll need to use overflow-y: auto to allow the list container (<dl>) to overflow vertically. Then, simply set headings (<dt>) to position: sticky and top: 0 to create a sticky effect. You can also style the headings to make them stand out.

From 30-seconds-of-code: floating-or-sticky-list-titles