网易云音乐app歌单详情页的交互效果特别好看，h5也要自己实现一下。
实现步骤
- 首先一个背景，背景图高斯模糊，然后加上遮罩
- 然后titlebar上面留出位置
- 下面一个div为了让他自适应高度，我们设置为绝对定位，然后top一个titlebar的高度，bottom为0，这样就占满整个屏幕
- 然后播放全部设为粘性布局
position: sticky;
top: 0;
- 然后他们父盒子元素设置为
overflow-y: scroll;
【js|h5实现网易云音乐歌单详情页向上滚动粘性滚动效果】这样就基本实现了，剩下的就是一些细节问题，大体实现框架思路如此。
滚动
- 非定高
就需要用定位来相对于浏览器视口来进行布局，就需要用决定定位，但是移动端fixed定位经常容易出问题，要慎用，可能会导致ios webview默认拉皮筋效果失效，我们这里使用absolute定位实现，但是这个就要注意他的父元素就不要有用定位的效果。 - 定高
弹窗固定高度，这种就比较好实现，内部标题固定，下部定高然后自己滚动。
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 网络|一文彻底搞懂前端监控
- JS/JavaScript|JS/JavaScript CRC8多项式 16进制