CSS position:stickyを使って、親要素内の他の要素のスクロールが終るまで、一時位置固定にします。サンプルはdl要素の中にdt要素と複数のdd要素が入っています。画面をスクロールして、ブルーの背景のタイトル(dt要素)部分にさしかかると、dd要素のスクロールが終わるまで、タイトルの位置が固定されます。
 

サンプル

A
Andrew W.K.
Apparat
Arcade Fire
At The Drive-In
Aziz Ansari
C
Chromeo
Common
Converge
Crystal Castles
Cursive
E
Explosions In The Sky
T
Ted Leo & The Pharmacists
T-Pain
Thrice
TV On The Radio
Two Gallants

 

htmlソース(一部)

<dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
</dl>

CSSソース

dt {
	background: #37d;
	color: #FFF;
	height:28px;
	font: bold 18px/28px Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 2px 0 0 12px;
	position: -webkit-sticky;
	position: sticky;
	top: -1px;
	}
dd {
	font: 18px/40px Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0 0 0 12px;
	white-space: nowrap;
	}
dd + dd {
	border-top: 1px solid #CCC
	}

 

引用と参考;https://developer.mozilla.org/ja/docs/Web/CSS/position#Sticky_positioning
戻るボタン