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

效果图

position: sticky

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

代码

html

<!-- 粘性布局 -->
<ul class="sticky-list">
  <!-- n个sticky-item -->
  <li class="sticky-item">
    <div class="title">2018年8月1日</div>
    <ul class="photo-list">
      <!-- n个photo-item -->
      <li class="photo-item">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="timg.jpg">
      </li>
    </ul>
  </li>
</ul>

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%;
      }
    }
  }
}