如何創建粘性網站標題

已發表: 2023-02-12

當用戶滾動時保留在原位的網站標題已成為一種非常流行的設計元素。它們允許用戶輕鬆訪問導航，而無需在每次他們想要選擇不同的頁面或選項時向上滾動。

具有此功能的元素通常被稱為“粘性”，因為它們會粘在用戶身上，在他們瀏覽網站時保持可見。當用戶第一次訪問該網站時，元素將位於其起始位置，但隨後粘性標題將保留在同一位置。

由於導航是網站最重要的元素之一，因此採用這種方法有助於使導航更易於訪問。保持原樣的導航可以讓用戶在瀏覽網站內容時輕鬆流暢，這一點非常重要。

當人們瀏覽您的網站時，粘性導航元素有助於創建簡單的用戶流。

1.是什麼讓它變粘？

1.1. 注意：不要在您的實時站點上嘗試此操作

1.2. 我們如何讓導航停留在一個地方？

1.3. 調整頁面主體

2.使粘性標題變軟

2.1. 使用 AnimatedHeader 腳本的 Squishy 導航

3. CSS 粘性定位選項

3.1. 使用位置：粘性

3.2. 注意這些粘性溢出情況

4.不要在你的網站上嘗試這個

是什麼讓它變粘？

固定定位是讓導航留在原地的關鍵組成部分。這個固定位置元素相對於視口或瀏覽器窗口本身定位。因為當網站滾動時視口不會改變，所以當頁面滾動時這個固定定位的元素將停留在同一個地方。

注意：不要在您的實時站點上嘗試此操作

請記住：您永遠不應該直接在您的實時站點上更改代碼，以確保沒有任何中斷。我們的免費本地開發應用程序 Local 將幫助您設置一個測試環境，您可以在其中安全地按照本教程進行操作。

我們如何讓導航停留在一個地方？

使導航具有粘性再簡單不過了；它只是通過 CSS 樣式完成的。它基本上看起來像這樣：

 [CSS]

.navbar-固定頂部{

位置：固定；

右：0；

左：0；

z-指數：999；

}

[/CSS]

無論你的頁面有多長，或者你上下滾動了多少次，導航都會“卡”在頁面頂部。一個名為.navbar-fixed-top的類被添加到創建導航位置的導航中。我將此類添加到 nav 標記中。位置設置為固定，並添加左右定位確保放置正確並佔據頁面的整個寬度。

請記住，無論何時應用此類，它都會創建元素的固定位置。這個類很可能只會被應用一次，否則會有多個頁面元素在同一個地方以相同的方式表現，造成混亂。

另一個重要的考慮因素是 z-index。因為我們希望導航始終可見，所以我們需要確保它不會被其他元素重疊。當我們引用z-index時，我們談論的是設置特定元素堆疊順序的 CSS 屬性。具有較高堆棧順序的元素始終位於另一個具有較低堆棧順序的元素之前。值 999 是一個很大的數字，使其成為導航的安全賭注。

調整頁面主體

因為現在導航是固定位置的，所以會覆蓋到頂部的部分內容。有一個簡單的修復方法。在 body 的頂部添加 padding 會將頁面向下推，這樣當用戶到達頁面時，頂部的內容就不會被標題覆蓋。
您可以在 CSS 文件中向正文添加填充：

 [CSS]

身體 {

填充頂部：75px；

}

[/CSS]

請記住，您的填充可能會更大或更小，具體取決於固定標題的厚度。

使粘性標題變軟

當用戶滾動超過某個點時，通常會發現標題變薄，使其看起來鬆軟。當導航尺寸減小時，它有助於為用戶提供更多空間來查看主要網站內容。這在較小的設備上特別有用。我們將結合使用 CSS 和 JavaScript 來實現這一目標。

使用 AnimatedHeader 腳本的 Squishy 導航

要添加將在滾動時更改其大小的動畫標題，有一個很棒的輕量級解決方案可以使導航變得柔軟。它被稱為 AnimatedHeader。它擁有 MIT 許可，因此可用於個人或商業項目。要獲取這些文件，請查看 GitHub 上的 AnimatedHeader。

用於導航的基本 CSS

讓我們來看看兩個重要的 CSS 樣式。第一個可能看起來很熟悉， .navbar-fixed-top指定了我們的高度、寬度和固定導航的固定位置。下面，您可以看到添加了另一個指定 75px 高度的類。這是“壓扁”的尺寸。

 [CSS]

.navbar-固定頂部{
位置：固定；
頂部：0；
左：0；
寬度：100%；
背景：#f6f6f6；
z-指數：999；
高度：90px；
溢出：隱藏；
-webkit-transition：高度0.3s；
-moz-transition：高度0.3s；
過渡：高度0.3s；
}

.navbar-fixed-top.cbp-af-header-shrink {
高度：75px；
}

[/CSS]

要更改大小，JavaScript 用於添加.cpb-af-header-shrink的類。讓我們看一下實現這一點的腳本部分：

 [javascript]

功能滾動頁面（）{
var sy = scrollY();
如果（sy &amp;amp;amp;amp;amp;gt;= changeHeaderOn）{
classie.add( header, 'cbp-af-header-shrink' );
}
別的 {
classie.remove(header, 'cbp-af-header-shrink' );
}
didScroll = false;
}

[/javascript]

提醒一下，腳本中包含更多內容，因此請務必下載源代碼，以便擁有所有組件。如您所見，在用戶滾動到某個點後，添加了.cpb-af-header-shrink類。如果用戶向上滾動頁面，則刪除此類。

CSS 粘性定位選項

還有一個選項可能不那麼麻煩。根據您設計的瀏覽器支持， position: sticky; 使創建粘性標頭變得非常簡單。瀏覽器支持並不糟糕，但也不完全是全球性的。當你有 sticky 聲明時，可以使用前綴。查看我可以使用以獲取更多詳細信息。

粘性定位的一種簡單描述是它是相對定位和固定定位的結合。我猜你經常遇到粘性定位。我們在這裡討論的是標題，但它對於您希望在用戶滾動時保持“粘性”的任何 UI 元素也很有用。當元素到達視口邊緣的特定距離時，他們會看到它“卡住”了。

該元素被視為相對定位，直到它到達某個點，然後它才被“固定”。這個點是使用 CSS 聲明的。 “點”基本上是當您指定頂部、底部、左側或右側時，就像您使用絕對定位一樣。您需要指定，以便元素有一些東西可以“堅持”。

使用位置：粘性

使用起來非常簡單。一些 CSS 聲明和我能夠有一個粘性標題。以下是三個簡單的步驟：

找到正確的樣式，以便您可以使用position:sticky; （不要忘記像position: -webkit-sticky;瀏覽器前綴）。
為要“粘貼”到的項目選擇“粘性邊緣”（頂部、右側、底部或左側）。
聲明與“粘性邊緣”的距離，即 10px 的標題，當它距離滾動區域 10px 時變得粘性。

 [CSS]

.navbar-固定頂部{
  位置：-webkit-sticky；
  定位：粘性；
  頂部：0；
}

[/CSS]

我不希望粘性標題和視口之間有任何空間，所以它距離頂部為 0 像素。你可以在 Codepen 上看到這個例子。

注意這些粘性溢出情況

溢出兼容性

這很棒，但並不完美。有一些限制。溢出有時會有點不可預測。最好在需要position: sticky父元素上避免某些類型的溢出。溢出自動、滾動或隱藏可能存在問題。

有限的瀏覽器支持

瀏覽器支持是有限的，所以使用supports規則來檢測當前瀏覽器是否支持粘性定位是一個選項。看起來像：

 [CSS]

@支持（位置：粘性）{
  .header{
    位置：-webkit-sticky；
    定位：粘性；
    頂部：0；
  }
}

[/CSS]

考慮粘性定位是否絕對必要是很重要的。如果是，則可以使用固定定位方法。如果不是絕對必要，或者瀏覽器支持不是問題，粘性方法更容易實現。

乍一看似乎很複雜，但沒有理由被困在導航車轍中；使您的導航具有粘性和粘性相對簡單。通過一些簡單的 CSS 固定定位，您可以輕鬆創建一個有粘性的網站標題。使用一些簡單的 JavaScript，可以通過壓縮到較低的高度來增強固定導航，從而為用戶提供更多空間來查看網站內容。

不要在您的實時網站上嘗試此操作

在本地為您的 WP Engine 託管網站創建一個粘性網站標題！了解更多信息並在此處免費下載！