angular-scrollpin —— 基于Angular的移动端的滚动列表“顶起”效果（类似手机QQ好友列表）

scrollpin指令，用于优化滚动列表，添加滚动特殊效果。

主要文件说明

scrollpin.html

在ngRepeat列表上使用指令scrollpin时，需要包含两个元素：滚动元素（样式类名为"pin"）和占位元素（样式类名为"name"），其中占位元素上绑定指令用来获取元素的偏移值。scrollpin属性值为滚动元素高度。

这里引用了百度的公用cdn上的angular。

scrollpin.js

绑定$window上的"scroll"事件，判断元素垂直偏移值、页面滚动距离、滚动元素高度来改变滚动元素的样式。

scrollpin.css

文件中的样式可自定义，其中滚动元素必须设置为position: absolute;。

实现原理

将滚动元素设置成绝对定位来脱离文档流并用占位元素避免高度塌陷，然后监听window的scroll事件，当滚动到一定距离的时候，将滚动元素设置成固定定位并调整位置实现“顶起”的效果。