position的第5个属性sticky

前言

CSS3之后position属性又增加了第5个属性值sticky，我们先看看MDN对于这个属性的介绍：

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

如MDN所说sticky其实就是relative加上fixed。那么具体属性特征我们可以举几个栗子说明一下。

具体特征

我们用一个栗子来解释下

---

• dom结构是这样的：

• CSS：

我们使body的高度为150vh使其可以滚动来看看效果：

很明显在滚动的过程中开始的时候，relative和sticky的行为都是一样的，但是当sticky与上方的距离到达为设定的50px的时候，sticky的的行为又和fixed一样了。

兼容性

目前这个属性IE是完全不支持的，我们可以通过加前缀适应大部分浏览器(-webkit-sticky)。