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

效果图

sticky.gif

position: sticky

设置之后，元素依然处于标准文档流中，但是当元素相对于视窗的位置跨越了你设置的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%;
      }
    }
  }
}

最后

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

image

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