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

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

实现步骤

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

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

滚动

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

你可能感兴趣的:(js,前端,css)