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

效果图

sticky.gif

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 src="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%;
      }
    }
  }
}

最后

本文到此结束，希望以上内容对你有些许帮助，如若喜欢请记得点个赞跟关注哦 💨

image
微信公众号「前端宇宙情报局」，将不定时更新最新、实用的前端技巧/技术性文章，欢迎关注，一起学习 🌘