position的第5个属性sticky

706

前言

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

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

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

具体特征

我们用一个栗子来解释下


  • dom结构是这样的:
  • CSS:

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

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

兼容性

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