scrollpin指令,用于优化滚动列表,添加滚动特殊效果。
在ngRepeat列表上使用指令scrollpin时,需要包含两个元素:滚动元素(样式类名为"pin")和占位元素(样式类名为"name"),其中占位元素上绑定指令用来获取元素的偏移值。scrollpin属性值为滚动元素高度。
这里引用了百度的公用cdn上的angular。
绑定$window上的"scroll"事件,判断元素垂直偏移值、页面滚动距离、滚动元素高度来改变滚动元素的样式。
文件中的样式可自定义,其中滚动元素必须设置为position: absolute;
。
将滚动元素设置成绝对定位来脱离文档流并用占位元素避免高度塌陷,然后监听window的scroll事件,当滚动到一定距离的时候,将滚动元素设置成固定定位并调整位置实现“顶起”的效果。
我的新书《了不起的JavaScript工程师:从前端到全端高级进阶》已经在京东上架,旨在帮助初级和中级web前端工程师提升进阶,成为具有全局视野的全能型人才,欢迎选购~