當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

通讯录式的吸顶效果

發布時間：2025/3/20 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了通讯录式的吸顶效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

通訊錄式的吸頂效果，當前bar固定在頂部

實現原理

吸頂的那個 bar 其實是一個定位在屏幕最上的一個元素，把下面各個區塊的高度累加放到一個數組里 [0, 740, 990, 1310, ...]

拿當前滾動體滾過的距離去上面的數組里找對應的區間，然后將 bar 的文字填充進去

拿所在區間的上限值 - 滾動值 = 偏移量

var fixedTop = (diff > 0 && diff < 40) ? diff - 40 : 0

根據上面 fixedTop 設置偏移量 fixedDom.style.transform = translate3d(0, ${fixedTop}px, 0)

具體代碼如下

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>吸頂效果</title> </head> <style> * {margin: 0;padding: 0;list-style: none;}.listview {position: relative;width: 100%;height: 100%;overflow: hidden;background: #222;}.list-group-title {height: 40px;line-height: 40px;padding: 0 20px;font-size: 12px;color: rgba(255,255,255,0.5);background: #333;text-align: center;}.li1 {/* margin: 10px; *//* 上下margin對沖 */padding: 10px;color: #fff;}.avatar {width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;}.singer-name {margin-left: 20px;color: rgba(255,255,255);font-size: 14px;}.list-fixed {position: fixed;top: 0;left: 0;width: 100%;color: rgba(255,255,255,0.5);background-color: #333;text-align: center;font-size: 12px;height: 40px;line-height: 40px;} </style> <body><ul id="ul1" class="listview"></ul><div class="list-fixed" id="list-fixed"><div class="fixed-title" id="fix-title"></div></div> </body> <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.2"></script> <script>var vConsole = new VConsole();var data = [{"title":"熱門","items":[{"id":"002J4UUk29y8BY","name":"薛之謙","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002J4UUk29y8BY.jpg?max_age=2592000"},{"id":"0025NhlN2yWrP4","name":"周杰倫","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000"},{"id":"004AlfUb0cVkN1","name":"BIGBANG (??)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004AlfUb0cVkN1.jpg?max_age=2592000"},{"id":"003Nz2So3XXYek","name":"陳奕迅","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003Nz2So3XXYek.jpg?max_age=2592000"},{"id":"001BLpXF2DyJe2","name":"林俊杰","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001BLpXF2DyJe2.jpg?max_age=2592000"},{"id":"0020PeOh4ZaCw1","name":"Alan Walker (艾倫·沃克)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000020PeOh4ZaCw1.jpg?max_age=2592000"},{"id":"000aHmbL2aPXWH","name":"李榮浩","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000aHmbL2aPXWH.jpg?max_age=2592000"},{"id":"000zmpju02bEBm","name":"TFBOYS","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000zmpju02bEBm.jpg?max_age=2592000"},{"id":"001JuGrt372YIQ","name":"Maroon 5 (魔力紅樂團)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001JuGrt372YIQ.jpg?max_age=2592000"},{"id":"000CK5xN3yZDJt","name":"許嵩","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000CK5xN3yZDJt.jpg?max_age=2592000"}]},{"title":"A","items":[{"id":"0020PeOh4ZaCw1","name":"Alan Walker (艾倫·沃克)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000020PeOh4ZaCw1.jpg?max_age=2592000"},{"id":"003ArN8Z0WpjTz","name":"A-Lin","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003ArN8Z0WpjTz.jpg?max_age=2592000"},{"id":"003CoxJh1zFPpx","name":"Adele (阿黛爾)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003CoxJh1zFPpx.jpg?max_age=2592000"}]},{"title":"B","items":[{"id":"004AlfUb0cVkN1","name":"BIGBANG (??)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004AlfUb0cVkN1.jpg?max_age=2592000"},{"id":"002pUZT93gF4Cu","name":"BEYOND","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002pUZT93gF4Cu.jpg?max_age=2592000"},{"id":"003LaMHm42u7qS","name":"本兮","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003LaMHm42u7qS.jpg?max_age=2592000"},{"id":"003DBAjk2MMfhR","name":"BLACKPINK","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003DBAjk2MMfhR.jpg?max_age=2592000"}]},{"title":"C","items":[{"id":"003Nz2So3XXYek","name":"陳奕迅","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003Nz2So3XXYek.jpg?max_age=2592000"},{"id":"004DFS271osAwp","name":"陳小春","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004DFS271osAwp.jpg?max_age=2592000"},{"id":"000jnR7q3pCzYG","name":"Charlie Puth (查理·普斯)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000jnR7q3pCzYG.jpg?max_age=2592000"},{"id":"004EyqQS2hMS6V","name":"陳翔","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004EyqQS2hMS6V.jpg?max_age=2592000"},{"id":"000hNnWC3kko2c","name":"蔡健雅","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000hNnWC3kko2c.jpg?max_age=2592000"}]},{"title":"E","items":[{"id":"000yDAjj2TE9j8","name":"Eminem (艾米納姆)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000yDAjj2TE9j8.jpg?max_age=2592000"}]},{"title":"F","items":[{"id":"003CKb192ggBqi","name":"Fall Out Boy (打倒男孩)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003CKb192ggBqi.jpg?max_age=2592000"},{"id":"003vyG9q2klWs4","name":"范瑋琪","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003vyG9q2klWs4.jpg?max_age=2592000"}]},{"title":"G","items":[{"id":"001fNHEf1SFEFN","name":"G.E.M. 鄧紫棋","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001fNHEf1SFEFN.jpg?max_age=2592000"},{"id":"000t2qd13dLpae","name":"G-DRAGON (權志龍)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000t2qd13dLpae.jpg?max_age=2592000"},{"id":"002OfR3n1vx75j","name":"葛林","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002OfR3n1vx75j.jpg?max_age=2592000"},{"id":"0043Zxw10txf5O","name":"郭靜","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000043Zxw10txf5O.jpg?max_age=2592000"}]},{"title":"H","items":[{"id":"002Vcz8F2hpBQj","name":"華晨宇","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002Vcz8F2hpBQj.jpg?max_age=2592000"},{"id":"002mze3U0NYXOM","name":"胡夏","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002mze3U0NYXOM.jpg?max_age=2592000"},{"id":"004QoDUs3jfOC6","name":"韓安旭","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004QoDUs3jfOC6.jpg?max_age=2592000"}]},{"title":"J","items":[{"id":"002DYpxl3hW3EP","name":"Justin Bieber (賈斯汀·比伯)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002DYpxl3hW3EP.jpg?max_age=2592000"},{"id":"004YXxql1sSr2o","name":"金志文","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004YXxql1sSr2o.jpg?max_age=2592000"},{"id":"0023ni2j3F9CpN","name":"Jam","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000023ni2j3F9CpN.jpg?max_age=2592000"},{"id":"001m7JoC1IVL44","name":"金南玲","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001m7JoC1IVL44.jpg?max_age=2592000"}]},{"title":"K","items":[{"id":"002Sm9iK4RIsCr","name":"筷子兄弟","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002Sm9iK4RIsCr.jpg?max_age=2592000"}]},{"title":"L","items":[{"id":"001BLpXF2DyJe2","name":"林俊杰","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001BLpXF2DyJe2.jpg?max_age=2592000"},{"id":"000aHmbL2aPXWH","name":"李榮浩","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000aHmbL2aPXWH.jpg?max_age=2592000"},{"id":"001SqkF53OEhdO","name":"鹿晗","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001SqkF53OEhdO.jpg?max_age=2592000"},{"id":"001f0VyZ1hmWZ1","name":"林宥嘉","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001f0VyZ1hmWZ1.jpg?max_age=2592000"},{"id":"002xpOdd4Dh6pu","name":"李易峰","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002xpOdd4Dh6pu.jpg?max_age=2592000"},{"id":"002ZOuVm3Qn20Y","name":"李宇春","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002ZOuVm3Qn20Y.jpg?max_age=2592000"},{"id":"002seUhN1Akj7J","name":"李圣杰","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002seUhN1Akj7J.jpg?max_age=2592000"},{"id":"003bQEFA3KrvLI","name":"劉瑞琦","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003bQEFA3KrvLI.jpg?max_age=2592000"},{"id":"003aQYLo2x8izP","name":"劉德華","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000"},{"id":"003nS2v740Lxcw","name":"李克勤","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003nS2v740Lxcw.jpg?max_age=2592000"}]},{"title":"M","items":[{"id":"001JuGrt372YIQ","name":"Maroon 5 (魔力紅樂團)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001JuGrt372YIQ.jpg?max_age=2592000"},{"id":"0035kILA0ydw3j","name":"MC天佑","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000035kILA0ydw3j.jpg?max_age=2592000"},{"id":"000WbpKa3WokLD","name":"MC魏小然","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000WbpKa3WokLD.jpg?max_age=2592000"},{"id":"000cISVf2QqLc6","name":"莫文蔚","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000cISVf2QqLc6.jpg?max_age=2592000"},{"id":"003wWQBU0fHBcj","name":"馬旭東","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003wWQBU0fHBcj.jpg?max_age=2592000"},{"id":"003rJfMG3PPqWd","name":"萌萌噠天團","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003rJfMG3PPqWd.jpg?max_age=2592000"}]},{"title":"N","items":[{"id":"003LCFXH0eodXv","name":"那英","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003LCFXH0eodXv.jpg?max_age=2592000"},{"id":"003ZQQb64D5317","name":"南征北戰","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003ZQQb64D5317.jpg?max_age=2592000"},{"id":"0012bj8d36Xkw1","name":"牛奶咖啡","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000012bj8d36Xkw1.jpg?max_age=2592000"}]},{"title":"O","items":[{"id":"002a1DuK4evNsR","name":"Owl City (貓頭鷹之城)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002a1DuK4evNsR.jpg?max_age=2592000"},{"id":"001FXn5P0kkWfV","name":"One Direction (單向組合)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001FXn5P0kkWfV.jpg?max_age=2592000"}]},{"title":"P","items":[{"id":"000mLAT42CFWNa","name":"樸樹","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000mLAT42CFWNa.jpg?max_age=2592000"},{"id":"003vSrlp0ujV6o","name":"鵬泊","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003vSrlp0ujV6o.jpg?max_age=2592000"}]},{"title":"Q","items":[{"id":"0030RkE50nmpWC","name":"曲婉婷","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000030RkE50nmpWC.jpg?max_age=2592000"},{"id":"0020IaUo4Vgsjk","name":"齊一","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000020IaUo4Vgsjk.jpg?max_age=2592000"},{"id":"000H4xDG3heHtr","name":"齊晨","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000H4xDG3heHtr.jpg?max_age=2592000"}]},{"title":"R","items":[{"id":"000f1b6W1wzyRN","name":"RADWIMPS (ラッドウィンプス)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000f1b6W1wzyRN.jpg?max_age=2592000"},{"id":"002MiBdR19HQWx","name":"Rihanna (蕾哈娜)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002MiBdR19HQWx.jpg?max_age=2592000"}]},{"title":"S","items":[{"id":"000Q4W691sMvLG","name":"蘇打綠","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000Q4W691sMvLG.jpg?max_age=2592000"},{"id":"001oXbjs29oPul","name":"孫子涵","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001oXbjs29oPul.jpg?max_age=2592000"},{"id":"004KKLWZ4320g1","name":"宋冬野","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004KKLWZ4320g1.jpg?max_age=2592000"},{"id":"001pWERg3vFgg8","name":"孫燕姿","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001pWERg3vFgg8.jpg?max_age=2592000"},{"id":"001t94rh4OpQn0","name":"雙笙","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001t94rh4OpQn0.jpg?max_age=2592000"}]},{"title":"T","items":[{"id":"000zmpju02bEBm","name":"TFBOYS","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000zmpju02bEBm.jpg?max_age=2592000"},{"id":"001ByAsv3XCdgm","name":"田馥甄","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001ByAsv3XCdgm.jpg?max_age=2592000"},{"id":"004ABIFV1EZUAj","name":"The Chainsmokers (煙民二人組)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004ABIFV1EZUAj.jpg?max_age=2592000"},{"id":"000ndQx82fsq8Z","name":"Tez Cadey","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000ndQx82fsq8Z.jpg?max_age=2592000"},{"id":"001Yxpxc0OaUUX","name":"逃跑計劃","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001Yxpxc0OaUUX.jpg?max_age=2592000"},{"id":"000QG95i2rHlOf","name":"譚晶","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000QG95i2rHlOf.jpg?max_age=2592000"}]},{"title":"W","items":[{"id":"001JDzPT3JdvqK","name":"王力宏","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001JDzPT3JdvqK.jpg?max_age=2592000"},{"id":"002yeznU3VAVEV","name":"吳亦凡","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002yeznU3VAVEV.jpg?max_age=2592000"},{"id":"001z2JmX09LLgL","name":"汪蘇瀧","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001z2JmX09LLgL.jpg?max_age=2592000"},{"id":"000GDDuQ3sGQiT","name":"王菲","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000GDDuQ3sGQiT.jpg?max_age=2592000"},{"id":"000CQ06r24Naco","name":"Wiz Khalifa (維茲·卡利法)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000CQ06r24Naco.jpg?max_age=2592000"},{"id":"001adLDR1SS40P","name":"汪峰","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001adLDR1SS40P.jpg?max_age=2592000"},{"id":"001WcO2V0TLCv3","name":"威仔","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001WcO2V0TLCv3.jpg?max_age=2592000"}]},{"title":"X","items":[{"id":"002J4UUk29y8BY","name":"薛之謙","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002J4UUk29y8BY.jpg?max_age=2592000"},{"id":"000CK5xN3yZDJt","name":"許嵩","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000CK5xN3yZDJt.jpg?max_age=2592000"},{"id":"004bsIDK0awMOv","name":"蕭敬騰","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004bsIDK0awMOv.jpg?max_age=2592000"},{"id":"00235pCx2tYjlq","name":"許巍","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M00000235pCx2tYjlq.jpg?max_age=2592000"},{"id":"004aRKga0CXIPm","name":"徐良","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004aRKga0CXIPm.jpg?max_age=2592000"},{"id":"001oNMzI3WznzG","name":"夏婉安","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001oNMzI3WznzG.jpg?max_age=2592000"},{"id":"002LZVMH0zc8F4","name":"徐佳瑩","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002LZVMH0zc8F4.jpg?max_age=2592000"}]},{"title":"Y","items":[{"id":"003tMm0y0TuewY","name":"楊宗緯","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003tMm0y0TuewY.jpg?max_age=2592000"},{"id":"004coWV04C5FCV","name":"楊洋","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004coWV04C5FCV.jpg?max_age=2592000"},{"id":"004FtTNW2b0tJi","name":"雨宗林","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004FtTNW2b0tJi.jpg?max_age=2592000"},{"id":"001IoTZp19YMDG","name":"易烊千璽","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001IoTZp19YMDG.jpg?max_age=2592000"}]},{"title":"Z","items":[{"id":"0025NhlN2yWrP4","name":"周杰倫","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000"},{"id":"002azErJ0UcDN6","name":"張杰","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002azErJ0UcDN6.jpg?max_age=2592000"},{"id":"003Cn3Yh16q1MO","name":"莊心妍","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003Cn3Yh16q1MO.jpg?max_age=2592000"},{"id":"0003ZpE43ypssl","name":"張碧晨","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000003ZpE43ypssl.jpg?max_age=2592000"},{"id":"004Be55m1SJaLk","name":"張學友","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004Be55m1SJaLk.jpg?max_age=2592000"},{"id":"000aw4WC2EQYTv","name":"張靚穎","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000aw4WC2EQYTv.jpg?max_age=2592000"},{"id":"003JGrNQ3RjelA","name":"張惠妹","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003JGrNQ3RjelA.jpg?max_age=2592000"},{"id":"004NMZuf2BLjg8","name":"周傳雄","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004NMZuf2BLjg8.jpg?max_age=2592000"},{"id":"0000mFvh1jtLcz","name":"張信哲","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000000mFvh1jtLcz.jpg?max_age=2592000"},{"id":"0044wQXL0ElWF1","name":"張宇","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000044wQXL0ElWF1.jpg?max_age=2592000"},{"id":"004eaDNU1nfRO0","name":"張磊","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000004eaDNU1nfRO0.jpg?max_age=2592000"},{"id":"002raUWw3PXdkT","name":"張韶涵","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000002raUWw3PXdkT.jpg?max_age=2592000"},{"id":"0042kZuh1dgLre","name":"周二珂","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M0000042kZuh1dgLre.jpg?max_age=2592000"},{"id":"003AfDK34H82GU","name":"張敬軒","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000003AfDK34H82GU.jpg?max_age=2592000"},{"id":"000SJp6n49rDgl","name":"張赫宣","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000000SJp6n49rDgl.jpg?max_age=2592000"}]},{"title":"9","items":[{"id":"001TpDgn4SxyJn","name":"????? (防彈少年團)","avatar":"https://y.gtimg.cn/music/photo_new/T001R300x300M000001TpDgn4SxyJn.jpg?max_age=2592000"}]}]function $(id) {return document.getElementById(id)} function $cls(cls) {return document.querySelectorAll(cls)}var obj = {init: function() {this.listHeight = []this.fixTitleArr = []this.prevIndex = -1this.fixTitle = $('fix-title')this.listFixed = $('list-fixed')let ele = this.createLi()$("ul1").innerHTML = elethis.initArr()this.scroll()this.fixTitle.innerText = this.fixTitleArr[0]console.log(this.listHeight)},createLi: function() {let ele = ""data.forEach(item => {ele += `<li class="list-group-item"><h2 class="list-group-title">${item.title}</h2><ul>${item.items.map(v => {return `<li class="li1"><img class="avatar" src=${v.avatar} alt=""/><span class="singer-name">${v.name}</span></li>`}).join('')}</ul></li>`})return ele},initArr: function() {var listGroup = $cls('.list-group-item')let height = 0this.listHeight.push(height)listGroup.forEach(item => {height += item.clientHeightthis.listHeight.push(height)})this.fixTitleArr = data.map((group) => group.title.substr(0, 1))},scroll: function() {var me = thisvar sWrapper = document.getElementsByTagName('body')[0]sWrapper.onscroll = function(e) {const el = document.scrollingElement || document.documentElement me.scollY(el.scrollTop)}},scollY: function(newY) {for (let i = 0; i < this.listHeight.length - 1; i++) {let h1 = this.listHeight[i]let h2 = this.listHeight[i + 1] if (newY >= h1 && newY < h2) {currentIndex = iconst diff = h2 - newYthis.renderFixBar(diff, currentIndex)return}}},renderFixBar: function(diff, index) { if (this.prevIndex !== index) {this.fixTitle.innerText = this.fixTitleArr[index]}// 40 為 fixTitle 的高度，手機上不知道為什么會有 1px 間隙var fixedTop = (diff > 0 && diff < 39) ? diff - 39 : 0this.listFixed.style.transform = `translate3d(0, ${fixedTop}px, 0)`this.prevIndex = index}}obj.init() </script> </html>

獲取滾動體滾過的距離參考鏈接

const el = document.scrollingElement || document.documentElement
const top = el.scrollTop

問題如下

在混雜模式下，由于所有瀏覽器均使用 document.body.scrollTop 獲取頁面的垂直滾動條的位置，所以不會出現兼容性問題。
而在標準模式下，由于 Chrome 與 Safari 仍然使用 document.body.scrollTop，而對于 document.documentElement.scrollTop 返回為 0。

順便再說說 document.scrollingElement 這個屬性。可能是瀏覽器廠商們也覺得現在的頁面滾動元素太亂，一會兒 BODY 一會兒 HTML，跟頁面模式有關，還跟 Webkit 的遺留 BUG 有關，于是搞出來這么個東西。根據 MDN 的介紹：

Document 的 scrollingElement 是一個只讀屬性，始終指向頁面滾動元素

各個區塊的高度計算參考文章

var listGroup = $cls('.list-group-item') let height = 0 this.listHeight.push(height) listGroup.forEach(item => {height += item.clientHeightthis.listHeight.push(height) })

clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop 的區別

clientHeight和offsetHeight屬性和元素的滾動、位置沒有關系它代表元素的高度，其中：
clientHeight：包括padding但不包括border、水平滾動條、margin的元素的高度。對于inline的元素這個屬性一直是0，單位px，只讀元素。

offsetHeight：包括padding、border、水平滾動條，但不包括margin的元素的高度。對于inline的元素這個屬性一直是0，單位px，只讀元素。

scrollHeight
scrollHeight: 因為子元素比父元素高，父元素不想被子元素撐的一樣高就顯示出了滾動條，
在滾動的過程中本元素有部分被隱藏了，scrollHeight代表包括當前不可見部分的元素的高度。

而可見部分的高度其實就是clientHeight，也就是scrollHeight>=clientHeight恒成立。

在有滾動條時討論scrollHeight才有意義，在沒有滾動條時scrollHeight==clientHeight恒成立。單位px，只讀元素

scrollTop: 代表在有滾動條時，滾動條向下滾動的距離也就是元素頂部被遮住部分的高度。在沒有滾動條時scrollTop==0恒成立。單位px，可讀可設置。

offsetTop: 當前元素頂部距離最近父元素頂部的距離,和有沒有滾動條沒有關系。單位px，只讀元素。

總結

以上是生活随笔為你收集整理的通讯录式的吸顶效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：体验Hadoop3.0生态圈-CDH6.
下一篇： Redis入门基础详解