CSS position:stickyを使って、親要素内の他の要素のスクロールが終るまで、一時位置固定に

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
	}