共计 19777 个字符，预计需要花费 50 分钟才能阅读完成。
通讯录式的吸顶效果，当前 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，只读元素。
scrollHeightscrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight 代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是 clientHeight，也就是 scrollHeight>=clientHeight 恒成立。
在有滚动条时讨论 scrollHeight 才有意义，在没有滚动条时 scrollHeight==clientHeight 恒成立。单位 px，只读元素
scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时 scrollTop== 0 恒成立。单位 px，可读可设置。
offsetTop: 当前元素顶部距离最近父元素顶部的距离, 和有没有滚动条没有关系。单位 px，只读元素。
