Sticky 黏性定位

Sicky

position: sticky;

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

MDN的範例(有微調整)

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

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

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

可滾動祖先有 padding

sticky element 是會黏在祖先的 Content 上 from wiki

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

或是 Position sticky with parent padding-top

Can I Use

Can I Use: CSS Sticky