粘性定位

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

#one { position: sticky; top: 10px; }

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。
粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。
须指定 top
, right
, bottom
或 left
四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

HTML 内容

  

    
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
  

CSS内容

* {
  box-sizing: border-box;
}

dl {
  margin: 0;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  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
}

详细资料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#Sticky_positioning