移動端angular滾動列表“頂起”特效：angular-scrollpin
angular-scrollpin —— 基于Angular的移動端的滾動列表“頂起”效果（類似手機QQ好友列表）
scrollpin指令，用于優化滾動列表，添加滾動特殊效果。
主要文件說明
scrollpin.html
在ngRepeat列表上使用指令scrollpin時，需要包含兩個元素：滾動元素（樣式類名為"pin"）和占位元素（樣式類名為"name"），其中占位元素上綁定指令用來獲取元素的偏移值。scrollpin屬性值為滾動元素高度。
這里引用了百度的公用cdn上的angular。
scrollpin.js
綁定$window上的"scroll"事件，判斷元素垂直偏移值、頁面滾動距離、滾動元素高度來改變滾動元素的樣式。
scrollpin.css
文件中的樣式可自定義，其中滾動元素必須設置為position: absolute;。
實現原理
將滾動元素設置成絕對定位來脫離文檔流并用占位元素避免高度塌陷，然后監聽window的scroll事件，當滾動到一定距離的時候，將滾動元素設置成固定定位并調整位置實現“頂起”的效果。
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！