position:sticky实现表头固定

单词 sticky 的中文意思是“粘性的”，position:sticky 表现也符合这个粘性的表现。基本上，可以看出是 position:relative 和 position:fixed 的结合体。当元素在屏幕内，表现为 relative，就要滚出显示器屏幕的时候，表现为 fixed。例如，可以标题吸顶。

‍

‍其中导航元素设置了如下CSS：

nav {
  position: sticky;
  top: 0;
}

于是，正如大家看到，随着页面的滚动，当导航距离上边缘 0 距离的时候，黏在了上边缘，表现如同 position:fixed。

我们可以实现富有层次的滚动交互，比如下面：

.container {
  width: 100%;
  max-height: 500px;
  overflow: auto;
}
h4 {
  position: sticky;
  top: 0;
  background: green;
}
.content {
  width: 100%;
  height: 500px;
  background: red;
}



  

    

      
苹果
      
1
    
    

      
香蕉
      
2
    
    

      
葡萄
      
3
    
  

我们还可以实现表头固定，类似于下面的效果：

‍

  
  
  
  




  

    

      

        

          
用户姓名
          
用户年龄
          
用户学校
          
用户班级
          
用户成绩
          
用户个数
        
      
      

        

          
张三
          
1
          
2
          
3
          
4
          
5
        
        

          
张三
          
1
          
2
          
3
          
4
          
5
        
      
    
  

总结：

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括 table-related 元素，基于 top, right, bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。

该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden, scroll, auto, 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为。