要實(shí)現(xiàn) sticky header 或 footer，關(guān)鍵在于正確使用 position: sticky。實(shí)現(xiàn) sticky header 時(shí)需設(shè)置 position: sticky 和 top: 0，并確保父容器不設(shè) overflow: hidden，建議加 z-index 防覆蓋；1. sticky header 不脫離文檔流，滾動(dòng)到頂部時(shí)固定，不影響其他內(nèi)容布局；2. 實(shí)現(xiàn) sticky footer 需包裹 main 內(nèi)容并設(shè)置 footer 的 position: sticky 和 bottom: 0，但僅在內(nèi)容不足一屏?xí)r生效；3. 使用 sticky 時(shí)需注意：父元素不能有 overflow: hidden/scroll/auto、必須指定 top 或 bottom、避免使用 transform/filter/will-change 等屬性、sticky 元素高度不可超過(guò)包含塊。sticky 是實(shí)用但有限制的屬性，適用場(chǎng)景為依賴滾動(dòng)上下文的固定定位。

做 sticky header 或者 footer 其實(shí)不難，關(guān)鍵在于用好 position: sticky。它不像 fixed 那樣脫離文檔流，而是介于 relative 和 fixed 之間，可以根據(jù)滾動(dòng)位置“粘”在屏幕上。但要用對(duì)它，有幾個(gè)細(xì)節(jié)必須注意。

Sticky Header 的基本寫法

想讓 header 固定在頂部？只需要給 header 設(shè)置 position: sticky，然后加上 top: 0。這樣瀏覽器就知道：當(dāng)這個(gè)元素滾動(dòng)到頂部時(shí)，就把它固定住。

header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

需要注意幾點(diǎn)：

• 父容器不能是 overflow: hidden，否則 sticky 不生效。
• 最好加個(gè) z-index，防止被其他內(nèi)容蓋住。
• 它本身不會(huì)占據(jù)空間消失，這點(diǎn)和 fixed 不一樣。

比如你有個(gè)導(dǎo)航欄，上面還有 banner 圖，sticky header 滾動(dòng)上去后會(huì)自然覆蓋 banner，但頁(yè)面其他內(nèi)容繼續(xù)滾動(dòng)。

Sticky Footer 的實(shí)現(xiàn)方式

Footer 要 sticky 在底部稍微麻煩點(diǎn)，因?yàn)榇蠖鄶?shù)時(shí)候我們希望它默認(rèn)顯示在內(nèi)容最后，只有當(dāng)內(nèi)容不夠高時(shí)才貼在屏幕底部。這需要一點(diǎn)結(jié)構(gòu)配合。

一種常見(jiàn)做法是使用一個(gè) wrapper 容器包裹主要內(nèi)容，并設(shè)置 footer 為 sticky：

<div class="wrapper">
  <main>頁(yè)面內(nèi)容</main>
  <footer class="sticky-footer">這里是底部</footer>
</div>

CSS：

.sticky-footer {
  position: sticky;
  bottom: 0;
  background: white;
}

不過(guò)這種方式只適用于內(nèi)容高度不足一屏的情況。如果內(nèi)容很長(zhǎng)，footer 還是會(huì)正常滾動(dòng)出去。如果你希望 footer 始終在視口底部（類似 fixed），那還是得用 position: fixed。

常見(jiàn)問(wèn)題和注意事項(xiàng)

使用 sticky 的時(shí)候，有些坑容易踩，這里列幾個(gè)常見(jiàn)的：

• 父元素設(shè)置了 overflow: hidden/scroll/auto → sticky 失效
• 沒(méi)有指定 top 或 bottom → 瀏覽器不知道你要粘在哪
• 使用了 transform、filter、will-change 等屬性 → sticky 可能失效
• sticky 元素的高度不能超過(guò)其包含塊的高度 → 否則可能不會(huì) stick

所以寫完記得檢查這些地方。有時(shí)候明明寫了 sticky 卻沒(méi)反應(yīng)，多半是這些原因。

基本上就這些。sticky 是個(gè)很實(shí)用的屬性，只要記住它依賴滾動(dòng)上下文，不是所有情況都適用。掌握好這些點(diǎn)，做 sticky header 或 footer 就不難了。

以上是如何使用CSS位置粘性創(chuàng)建粘性標(biāo)頭或頁(yè)腳的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！