CSS 粘性布局

[luofeiioi]

粘性布局是什么

当你在浏览网页的时候，滚动滚轮，网页也开始上下动起来，这个结构类似于胶片放映机，整个浏览器是窗口，在窗口的背后网页类似于胶片一样移动。粘性布局在你滑动滚轮的时候，滚动到某个位置就好像黏住了一样，就像胶片放映机卡住了一样，最上层的图像是固定的。

position: sticky

position: sticky是CSS3的原生实现，首先设置 position: sticky;然后设置top或bottom，意思是到那个阈值在页面上黏住。

.mainTwo{
  height: 100px;       //实现在距离顶端20px的时候黏住
  width: 100px;
  background-color: red;
  position: sticky;
  top:20px;
}

使用该方式的时候浏览器干了什么

通过使用Chrome的Layers可观察到，当到达该阈值的时候，渲染引擎创造了一个空白块级占位块，并为该元素创立新图层。再次到达该阈值时，过程取反。