<p> This is the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning" target="_blank">demo from MDN</a>. CSS <code>position: sticky</code> is supported in Firefox, Safari, and Chrome Canary (56+). </p> <hr /> <div> <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> <dl> <dt>C</dt> <dd>Chromeo</dd> <dd>Common</dd> <dd>Converge</dd> <dd>Crystal Castles</dd> <dd>Cursive</dd> </dl> <dl> <dt>E</dt> <dd>Explosions In The Sky</dd> </dl> <dl> <dt>T</dt> <dd>Ted Leo & The Pharmacists</dd> <dd>T-Pain</dd> <dd>Thrice</dd> <dd>TV On The Radio</dd> <dd>Two Gallants</dd> </dl> </div>
* { box-sizing: border-box; } body { font: bold 18px/21px Helvetica, Arial, sans-serif; } p { font-weight: normal; background: #FFF59D; padding: .8em; } a { color: #07c; } dl { margin: 0; padding: 24px 0 0 0; } dt { background: #B8C1C8; border-bottom: 1px solid #989EA4; border-top: 1px solid #717D85; color: #FFF; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px; } dd { font: bold 20px/45px Helvetica, Arial, sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; } dd + dd { border-top: 1px solid #CCC }