粘性定位看著很簡單，但也很容易出現(xiàn)不生效的情況。為幫助大家徹底理解粘性定位，本文會從 3 個方面來介紹：

• 粘性定位的原理。

• 不生效的情況。

• 具體的例子。

原理

為便于理解粘性定位，這里引入四個元素：視口元素，容器元素，粘性約束元素 和 sticky 元素。它們的關(guān)系如下：

視口元素：顯示內(nèi)容的區(qū)域。會設(shè)置寬，高。一般會設(shè)置 overflow:hidden。
容器元素：離 sticky 元素最近的能滾動的祖先元素。
粘性約束元素：粘性定位的父元素。有時，也會出現(xiàn)粘性約束元素就是容器元素的情況。
sticky 元素：設(shè)置了 position: sticky; 的元素。

滾動時，sticky 元素設(shè)置的 left, right, top, bottom 的值相對的是容器元素。當(dāng)粘性約束元素滾出視口時，sticky 元素也會滾出視口。

不生效的情況

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

此時，設(shè)置 position: sticky 相當(dāng)于設(shè)置 position: relative。

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

情況2: 垂直滾動時，粘性約束元素高度小于等于 sticky 元素高度

不生效的原因：當(dāng)粘性約束元素滾出視口時，sticky 元素也會滾出視口。粘性約束元素比 sticky 元素還小，sticky 元素沒有顯示固定定位狀態(tài)的機會。

同樣的，水平滾動時，粘性約束元素寬度小于等于 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">網(wǎng)站頭部</div>

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

<div class="article">

  <!-- sticky 元素 -->

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

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

</div>

<div class="footer">網(wǎng)站底部</div>

.title {

  position: sticky;

  top: 0;

  background-color: #fff;

}