先放效果圖鎮(zhèn)樓：（其實主要效果在于左上角的字母條在滑動過程中黏性覆蓋固定）
通訊錄.gif
當前系統(tǒng)支持效果：iOS（當然Android下就各安天命了，畢竟這個效果是因為iOS的通訊錄才引發(fā)的血案）
代碼實現(xiàn)，主要是字母條（也就是每一區(qū)域聯(lián)系人的頭部塊）需要的樣式：
list-head {
position: relative;
position: -webkit-sticky;
position: -moz-sticky;
position: sticky;
top: 0;
z-index: 1;
}
一開始可能會遇到的問題：
（1 一開始設置了樣式剥纷，但是在手機上并沒有此效果头朱，推斷是position的覆蓋，就是relative和sticky的順序桐智，應該將sticky放在relative的后面。
（2 測試的時候還發(fā)現(xiàn)在滑動的過程中列表的個別樣式丟失和跳動，或者說是在脫離文檔流自由飛翔了奥秆，猜測是布局沒有用position:releate;將列表項圈起來，于是在后面每一個列表項增加一個position:releate;咸灿。
（3 還發(fā)現(xiàn)往上滑動列表的時候构订，只有第一個列表項在經過字母條的時候覆蓋到它的上面，然后到了第二個列表項往上滑動的時候避矢，就被字母條覆蓋回去在下面了悼瘾，猜測是z-index搞的鬼，于是在list-head增加最后一個樣式: z-index:1;
