通訊錄式的吸頂效果

通訊錄式的吸頂效果，當前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 = -1
            this.fixTitle = $('fix-title')
            this.listFixed = $('list-fixed')

            let ele = this.createLi()
            $("ul1").innerHTML = ele
            this.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 = 0
            this.listHeight.push(height)
            listGroup.forEach(item => {
                height += item.clientHeight
                this.listHeight.push(height)
            })
            this.fixTitleArr =  data.map((group) =>  group.title.substr(0, 1))
        },
        scroll: function() {
            var me = this
            var 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 = i
                    const diff = h2 - newY
                    this.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 : 0
            this.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.clientHeight
    this.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，只讀元素。

通訊錄式的吸頂效果

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

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

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

css 預處理器 - sass/scss、less、stylus

通訊錄式的吸頂效果

阿里雲服務器部署nodejs+mongodb項目 nginx 反向代理 https配置 ssl證書

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

通訊錄式的吸頂效果

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

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

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

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

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