用position: sticky 实现粘性元素区域悬浮效果（转）

用position: sticky 实现粘性元素区域悬浮效果

原创 2017年08月02日 20:04:13

• 161

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

这个效果可以用position：sticky实现，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

代码如下：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

页面效果如下： 

可见机型模块固定显示在正常位置，

页面往下拉以后，机型固定悬浮在距离顶部导航60px的位置，相当与设置了：

position：fixed;
top:60px;

• 1
• 2

可以知道sticky属性有以下几个特点：

1.该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。 
2.当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。 
3.元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量