通讯录式的吸顶效果

2019年9月13日 118次阅读来源: 大桔子

通讯录式的吸顶效果，当前bar固定在顶部

《通讯录式的吸顶效果》

方法一： js 监听 onscroll 事件

实现原理

吸顶的那个 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，只读元素。

2019-07-09 更新

方法二：position: sticky

sticky: 粘性布局，基本上，可以看作是 position: relative 和 position: fixed 的结合体 ——当元素在屏幕内，表现为 relative ，就要滚出显示器屏幕的时候，表现为 fixed

对元素设置：
position: -webkit-sticky;
position: sticky;
top: 0; // 左右也可以设置 left

上栗的吸顶效果可以用 sitcky 实现

// 将上述代码改成 如下即可，注意其祖先元素不可有 overflow: visible 以外的元素
.list-group-title {
    postion: sticky;
    top: 0;
}

注意事项：
1. 父级元素不能有任何 overflow: visible 以外的设置，否则就没有粘滞效果
2. 父级元素不能设置固定的 hight 高度值
3. 同一个父容器中的 sticky 元素，如果定位值相同，则会重叠；如果属于不同父元素，则会鸠占鹊巢，挤开原来的元素，依次形成占位效果。（吸顶效果）
4. sticky 定位，不仅可以设置 top，基于滚动容器上边缘定位；还可以设置bottom，left，right
sticky 参考张鑫旭大佬的文章 sticky

    原文作者：大桔子
    原文地址: https://segmentfault.com/a/1190000017998387
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

通讯录式的吸顶效果，当前bar固定在顶部

方法一： js 监听 onscroll 事件

获取滚动体滚过的距离 参考链接

各个区块的高度计算 参考文章

方法二：position: sticky

获取滚动体滚过的距离参考链接

各个区块的高度计算参考文章