CSS 粘性布局sticky：使用方法+代码示例

粘性定位(sticky positioning)是CSS布局中的一种新特性。它是一种混合模式的位置，它的行为像relative和fixed的混合体，会根据用户的滚动位置在相对和固定之间切换。

粘性定位可以被认为是相对定位和固定定位的混合。在position:sticky; 被触发时，其表现如同position:fixed;，但它会保留在其父元素的Content-box的指定位置，就像position:relative;一样。

以下是使用粘性定位的方法和代码示例：

方法：

1. 使用CSS属性position:sticky; 来定义粘性定位。
2. 使用属性top, right, bottom, 或left来定义在何处变得粘性。

代码示例：

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; /* 粘性定位在视窗顶部 */
  background-color: green;
  border: 2px solid #4CAF50;
}

<div class="sticky">我在滚动时固定在顶部</div>
 
<p>向下滚动页面，我会看到 .sticky 元素在滚动时保持在视窗顶部。</p>
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...