Sticky 黏性定位

Sicky

position: sticky;

MDN上寫 sticky 可以被視為 relative 跟 fixed 的混合
sticky element 不會影響原本的排版，就像是 relative
會以相對位置黏 (固定) 在最近的可滾動祖先上，這時像是 fixed
可移動的範圍為 sticky element 的父層

MDN的範例(有微調整) (opens new window)

A

Andrew W.K.

Apparat

Arcade Fire

At The Drive-In

Aziz Ansari

A Footer

C

Chromeo

Common

Converge

Crystal Castles

Cursive

C Footer

E

Explosions In The Sky

E Footer

T

Ted Leo & The Pharmacists

T-Pain

Thrice

TV On The Radio

Two Gallants

T Footer

<div class="sticky-demo">
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
    <footer>A Footer</footer>
  </dl>
  ...
</div>

.sticky-demo {
  height: 200px;
  overflow-y: auto;
  ...
}

dt {
  position: sticky;
  top: 0;
  ...
}

footer {
  position: sticky;
  bottom: 0;
  ...
}

<dt> 與 <footer> 為 sticky element
<dl> 為 sticky element 的父層
.sticky-demo 有 height、overflow 為可滾動的祖先

可以看到當 scorllbar 到達 <dt> 的頂部時，<dt> 會黏在頂部
滾動到可見到 <dl> 的範圍時， <footer> 都會黏在底部
且到達 <dl> 的底部後便停下不再繼續黏住

---

為什麼在 Safari 上沒有用？

sticky element 必須要是 display: block 才會有效
Safari position:sticky not working in an overflow:auto element (opens new window)

為什麼設定了 position: sticky; 還是沒有用？

垂直滾動 ( y軸 ): 必須要設定 top、bottom 才會使黏性定位生效
水平滾動 ( x軸 ): 必須要設定 left、right 才會使黏性定位生效

可滾動祖先有 padding

sticky element 是會黏在祖先的 Content 上
from wiki (opens new window)

如果可滾動的祖先有 padding-top: 30px; 又想要黏在頂部就得設定 top: -30px;

See the Pen position: sticky; by Jian, Er-Ting (@clipwww) on CodePen.

或是 Position sticky with parent padding-top (opens new window)

Can I Use

Can I Use: CSS Sticky (opens new window)