今天带来的是一个逆天的 css 属性，position: sticky。粘性定位。

相信大家对 css 中 position 属性的用法不陌生，那么今天这个属性是做什么的呢？他就是用来做吸顶的效果的，不需要 js 计算，只需要两条 css 属性即可。

请看下方效果，标题 A,C,E,T等自动吸顶。

See the Pen 粘性定位 by newming (@newming) on CodePen.

其中核心代码就只有两句 css。其中 top 为吸顶效果的边界值。我们可以想像成加了 sticky 属性后，这个元素会自动去按照我们的给定的边界值计算，具体表现为什么。具体来说就是按照 position: fixed; 来算。比如例子中，当标题 fixed 后，它当前的位置的值如果比我们给定的 -1px 小，就表现为 fixed 的效果，如果大于 -1px，表现为 relative 效果

1
2

position: sticky;
top: -1px;

综上，sticky 会变现出两种其他 position 效果，当小于边界值，为 fixed，反之则 relative。有个蛋疼的地方是： android 表现不佳。