Sticky Header

by pphheerroonn

HTML

<div class="header">

</div>
  <dl>
    <dt>A</dt>
    <dd>Amanda</dd>
    <dd>Alan</dd>
    <dd>Angelina</dd>
    <dd>Azure</dd>
    <dd>Azzim</dd>
  </dl>
  <dl>
    <dt>B</dt>
    <dd>Ben</dd>
    <dd>Benny</dd>
    <dd>Brad</dd>
    <dd>Brosnan</dd>
    <dd>Bryan</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Elizabeth</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted</dd>
    <dd>Tod</dd>
    <dd>Tory</dd>
    <dd>Tylero</dd>
    <dd>Tyson</dd>
  </dl>

CSS

a {color: #555;}

dl {margin: 0; padding:0;}

dt {
  background: #555;
  color: #FFF;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
}

dd {
  margin: 0;
  padding: 0 0 0 12px;
}

dd + dd {
  border-top: 1px solid #555
}
.header{
  margin:0;
  background: #f2f2f2;
  height:30px;
  position: sticky;
  position: -webkit-sticky;
  top:-1px;
  z-index:2;
}