Css粘性定位实现Iphone相册吸顶效果

设置之后，元素依然处于标准文档流中，但是当元素相对于视窗的位置跨越了你设置的top、right、bottom、left其中一个值之后，该元素将变成fixed定位(本文设置了top: 0)

html

  
  

    2018年8月1日
    

      
      

 
      
    
  

scss

.sticky-list {
    sticky-item {
    .title {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      padding: .5rem;
      background-color: #fff;
    }
  }
  .photo-list {
    display: flex;
    flex-wrap: wrap;
    padding: .5rem;
    padding-bottom: 0;
    .photo-item {
      flex-basis: 19%;
      margin-right: 1%;
      margin-bottom: 1%;
      &:last-child {
 margin-right: 0;
      }
      img {
 display: block;
 width: 100%;
      }
    }
  }
}