常用于表格表头,页面导航,选项卡等。
比如 这个 bar 在中间,但滚动向上,这个bar触到顶部时,则自动fix。
当向下滚动,bar则自动融回原位置。

{position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:sticky;top:0;left:0;z-index:9980}

说明
在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。

这种效果一直以来需要通过 JavaScript 实现。不过就在去年,这项结合了 Relative (在屏幕中时) 和 Fixed (移出屏幕时) 的样式效果被提案添加到了 CSS3 中。下面是一个示例:

.sticky {  
    position: -webkit-sticky;  
    position: -moz-sticky;  
    position: -ms-sticky;  
    position: sticky;  
    top: 15px; // 使用和 Fixed 同样的方式设定位置  
} 

因为这个样式尚未进入标准,还必须使用私有前缀。