先放效果图镇楼：（其实主要效果在于左上角的字母条在滑动过程中黏性覆盖固定）
通讯录.gif
当前系统支持效果：iOS（当然Android下就各安天命了，毕竟这个效果是因为iOS的通讯录才引发的血案）
代码实现，主要是字母条（也就是每一区域联系人的头部块）需要的样式：
list-head {
position: relative;
position: -webkit-sticky;
position: -moz-sticky;
position: sticky;
top: 0;
z-index: 1;
}
一开始可能会遇到的问题：
（1 一开始设置了样式，但是在手机上并没有此效果，推断是position的覆盖，就是relative和sticky的顺序，应该将sticky放在relative的后面。
（2 测试的时候还发现在滑动的过程中列表的个别样式丢失和跳动，或者说是在脱离文档流自由飞翔了，猜测是布局没有用position:releate;将列表项圈起来，于是在后面每一个列表项增加一个position:releate;。
（3 还发现往上滑动列表的时候，只有第一个列表项在经过字母条的时候覆盖到它的上面，然后到了第二个列表项往上滑动的时候，就被字母条覆盖回去在下面了，猜测是z-index搞的鬼，于是在list-head增加最后一个样式: z-index:1;
网友评论