css的sticky,CSS3 sticky 粘性布局

在 CSS 中位置属性 position 大家对 relative、fixed、absolute 已经用的非常熟悉了，在 CSS3 中出现了 sticky 这个特殊的定位方式。

功能描述

在 W3C 标准中 sticky 功能描述：元素的位置基于用户滚动位置定位，sticky 定位的元素位置在 relative 和 fixed 之间切换，具体取决于滚动位置。它会被相对定位，直到浏览器可是区域中满足给定的偏移位置，否则会被粘住到固定的位置。(W3C Positon)

如何理解它的定位方式呢，我们直接上 Demo：html>

Contacts

A

啊三

啊五

apple

Alph

ABC

apple

Alph

ABC

apple

Alph

ABC

B

Banana

Back

Banana

Back

Banana

Back

Banana

Back

Banana

Back

C

China

Cat

Cookie

Cake

Color

China

Cat

Cookie

Cake

Color

运行上面的 Demo，大家会看到和 iPhone 通讯录类似的效果，通讯录的标题(首字母)，会随着屏幕的滚动固定到屏幕的顶部。

兼容性

它的兼容性比起 relative、fixed、absolute 相对差一些 caniuse：

css-sticky.jpg

最后

这种新的布局方式，让我们 web 前端又有了新的设计方式，虽然兼容性有待提高，但是随着浏览器的迭代更新，它会被越来越多的浏览器厂商支持，它的确给我们的开发更佳的简单。