简介

posiiton: sticky;类似于fixed定位，需要配合位置属性 top | bottom | left | right；

与fixed定位的区别在于：sticky定位默认情况下跟static表现一致（没有定位），但随着页面滚动，元素超出视窗时，就变为fixed定位了。

1
2
3
4
div{
	position: sticky;
	top: 0;
}

⤴️ 两行CSS样式实现随着页面滚动NavBar粘在浏览器顶部的效果。

优点

首先这种业务需求是非常常见的，以往我们的方式是js实时监测浏览器视窗滚动位置以及固定的navbar当前位置，综合判断是否需要修改定位属性为fixed，问题是在移动端很多webview出于性能考虑，对onscroll事件，以及touchmove事件做了节流，导致吸附效果会延迟，用户体验非常差。

所以sticky的出现，让我们优雅的实现了这个需求。

缺陷

兼容性很不好，移动端只有iOS Safari支持，桌面端Firefox支持，截止目前chrome最新版本 55.0.2883.95 (64-bit)不支持（据说后续版本会支持）。

兼容性请参见Can I Use