粘性定位看着很简单，但也很容易出现不生效的情况。为帮助大家彻底理解粘性定位，本文会从 3 个方面来介绍：

• 粘性定位的原理。

• 不生效的情况。

• 具体的例子。

原理

为便于理解粘性定位，这里引入四个元素：视口元素，容器元素，粘性约束元素 和 sticky 元素。它们的关系如下：

视口元素：显示内容的区域。会设置宽，高。一般会设置 overflow:hidden。
容器元素：离 sticky 元素最近的能滚动的祖先元素。
粘性约束元素：粘性定位的父元素。有时，也会出现粘性约束元素就是容器元素的情况。
sticky 元素：设置了 position: sticky; 的元素。

滚动时，sticky 元素设置的 left, right, top, bottom 的值相对的是容器元素。当粘性约束元素滚出视口时，sticky 元素也会滚出视口。

不生效的情况

情况1: 未指定 top, right, top 和 bottom 中的任何一个值

此时，设置 position: sticky 相当于设置 position: relative。

要生效，要指定 top, right, top 或 bottom 中的任何一个值。

情况2: 垂直滚动时，粘性约束元素高度小于等于 sticky 元素高度

不生效的原因：当粘性约束元素滚出视口时，sticky 元素也会滚出视口。粘性约束元素比 sticky 元素还小，sticky 元素没有显示固定定位状态的机会。

同样的，水平滚动时，粘性约束元素宽度小于等于 sticky 元素宽度时，也不会生效。

情况3: 粘性约束元素和容器元素之间存在 overflow: hidden 的元素

该情况的示例代码:

<div class="viewport">

  <div class="container"> <!-- 容器元素 -->

    <div style="overflow: hidden">

      <div> <!-- 粘性约束元素 -->

        <div class="stick-elem">...</div>  <!-- sticky 元素 -->

        ...

      </div>

    </div>

  </div>

</div>

<div class="header">网站头部</div>

<!-- 粘性约束元素 -->

<div class="article">

  <!-- sticky 元素 -->

  <h2 class="title">彻底理解粘性定位 - position: sticky</h2>

  <div class="content">...</div>

</div>

<div class="footer">网站底部</div>

.title {

  position: sticky;

  top: 0;

  background-color: #fff;

}