Skip to content
angular directive,effects for scroll list,only mobile. 移动端angular滚动列表“顶起”特效。
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitattributes
.gitignore
README.md
scrollpin.css
scrollpin.gif
scrollpin.html
scrollpin.js

README.md

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

angular移动端滚动列表特效

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

主要文件说明

scrollpin.html

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

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

scrollpin.js

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

scrollpin.css

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

实现原理

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


我的新书《了不起的JavaScript工程师:从前端到全端高级进阶》已经在京东上架,旨在帮助初级和中级web前端工程师提升进阶,成为具有全局视野的全能型人才,欢迎选购~

You can’t perform that action at this time.