HTML+CSS+JS（+Vue）写一个通讯录组件

求各位大大的Star(*/ω＼*)。

没有录屏，所以上传的是图片。后面已补充录屏效果。

效果：（主要是参考小米Note3的通讯录的效果做的）

主要功能：

1. 滚动后，通讯录的模块标题会固定在顶部（图2）

2. 下一个标题很接近时，将上一个标题推上去的效果（过程：图3、图4、图5）

 

实现：

1. 模块标题会固定在顶部：这个实现比较简单，监听滚动的距离，如果大于0（相对的0）就显示固定的标题。

2. 推上去的效果：实际上是修改固定的标题的top值，导致的视觉错觉。当下一个标题距离顶部的距离超出可视区域，将标题又定位在顶部。

 

<