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

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

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

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

主要功能：

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

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

 

实现：

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

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

 

另外需要注意的地方：

1. 固定的标题一开始就需要展示，只是top比较大/小，不在可视区域内。

2. 在页面中使用时，页面的内容（除了组件），需要给一个z-index和背景色，否则推上去的效果会盖住页面的内容/盖不住。

3. （建议）JS代码里的高度值等，都是通过获取的方式，而不是写固定值的方式。样式可配置。

4. 增加了在slot传入标题、标题是否固定在顶部功能。

 

这个组件可以单独拿来当页面用，也可以当组件用~

 

上传了三个版本：（另增加了两个版本）

三者之间的区别：

1. 版本1的容器是固定高度的。
   版本2、版本3的容器不定高。
2. 版本2可以将标题传入slot，另外还有固定标题/不固定标题的选项。 （不支持组件外的标题）
   版本1的标题写在组件外。
   版本3二者都可以实现，PS 组件外的标题不能被固定。
3. 版本1有下一个标题把上一个标题往上推的效果。
   版本2只有在固定标题的时候有这个效果，不固定标题的时候(fixedTitle为false时)没有往上推的效果。
   版本3有下一个标题把上一个标题盖住的效果。
4. 版本3已将css改成可配置。

 

补充录屏效果：

版本1例子预览：

版本2例子预览：

版本3例子预览：

1. 内标题固定

2. 内标题不固定

 

具体代码在这里  https://github.com/littleHiuman/codes-about-front-end/tree/master/addressList 

求各位大大的star呀~