h5实现网易云音乐歌单详情页向上滚动粘性滚动效果

网易云音乐app歌单详情页的交互效果特别好看，h5也要自己实现一下。

实现步骤

1. 首先一个背景，背景图高斯模糊，然后加上遮罩
2. 然后titlebar上面留出位置
3. 下面一个div为了让他自适应高度，我们设置为绝对定位，然后top一个titlebar的高度，bottom为0，这样就占满整个屏幕
4. 然后播放全部设为粘性布局

position: sticky;
top: 0;

5. 然后他们父盒子元素设置为

 overflow-y: scroll;

这样就基本实现了，剩下的就是一些细节问题，大体实现框架思路如此。

滚动

• 非定高
  就需要用定位来相对于浏览器视口来进行布局，就需要用决定定位，但是移动端fixed定位经常容易出问题，要慎用，可能会导致ios webview默认拉皮筋效果失效，我们这里使用absolute定位实现，但是这个就要注意他的父元素就不要有用定位的效果。
• 定高
  弹窗固定高度，这种就比较好实现，内部标题固定，下部定高然后自己滚动。