通讯录字母顶部粘性定位实现实例页面

展示

代码

• HTML：

  <h4>同一个父元素，重叠覆盖</h4>
  <h6>A</h6>
  <ul>
      <li>Alice</li>
      <li>暗香</li>
      <li>Ares-徐舟</li>
  </ul>
  <h6>B</h6>
  <ul>
      <li>贝贝王爷有点萌</li>
      <li>Blue含资</li>
      <li>不吵不闹</li>
      <li>不动的飞矢、大奔</li>
  </ul>
  <h6>C</h6>
  <ul>
      <li>- Ccccccc张磊</li>
      <li>采蘑菇的小姑娘</li>
      <li>Cecilia_yu</li>
      <li>陈玲</li>
      <li>虫儿飞</li>
      <li>窗棂微风-高晨萱</li>
      <li>从此以后。。。</li>
      <li>CSS conf的好友</li>
  </ul>
  <h6>D</h6>
  <ul>
      <li>大白鲨</li>
      <li>大猫猫</li>
      <li>大漠</li>
      <li>大嘴</li>
      <li>DARKEN</li>
      <li>Double宜-前端开发小萌新</li>
      <li>Dream</li>
  </ul>
  
  <h4>不同的父元素，依次推开</h4>
  
  <dl>
      <dt>A</dt>
      <dd>Alice</dd>
      <dd>暗香</dd>
      <dd>Ares-徐舟</dd>
  </dl>
  <dl>
      <dt>B</dt>
      <dd>贝贝王爷有点萌</dd>
      <dd>Blue含资</dd>
      <dd>不吵不闹</dd>
      <dd>不动的飞矢、大奔</dd>
  </dl>
  <dl>
      <dt>C</dt>
      <dd>- Ccccccc张磊</dd>
      <dd>采蘑菇的小姑娘</dd>
      <dd>Cecilia_yu</dd>
      <dd>陈玲</dd>
      <dd>虫儿飞</dd>
      <dd>窗棂微风-高晨萱</dd>
      <dd>从此以后。。。</dd>
      <dd>CSS conf的好友</dd>
  </dl>
  <dl>
      <dt>D</dt>
      <dd>大白鲨</dd>
      <dd>大猫猫</dd>
      <dd>大漠</dd>
      <dd>大嘴</dd>
      <dd>DARKEN</dd>
      <dd>Double宜-前端开发小萌新</dd>
      <dd>Dream</dd>
  </dl>

• CSS：

  h6, dt {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
  
      background-color: #eee;
      color: #444;
      padding: 3px 1rem;
  }
  
  li, dd {
      padding: 5px 1rem;
      border-top: 1px solid #f5f5f5;
  }