如何創建粘性網站標題

已發表: 2018-10-14

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

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

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

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

是什麼讓它發粘？

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

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

請記住：您不應該直接在您的網站上更改代碼，以確保不會出現任何問題。我們的免費本地開發應用程序 Local 將幫助您設置一個測試環境，您可以安全地按照本教程進行操作。

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

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

.navbar-fixed-top {

position: fixed;

right: 0;

left: 0;

z-index: 999;

}

無論您的頁面有多長，或者您上下滾動多少次，導航都會“卡”在頁面頂部。一個名為.navbar-fixed-top的類被添加到為導航創建位置的導航中。我將此類添加到導航標籤中。位置設置為固定並添加左右定位可確保放置正確並佔據頁面的整個寬度。
請記住，無論何時應用此類，它都會創建元素的固定位置。這個類很可能只會應用一次，否則會有多個頁面元素在同一個地方表現相同，造成混亂。

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

調整頁面正文

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

body {

padding-top: 75px;

}

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

沒有在粘性網站標題上出售？了解如何向您的網站添加粘性返回頂部按鈕。

使粘性標題變軟

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

帶有 AnimatedHeader 腳本的 Squishy 導航

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

導航的基本 CSS

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

.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f6f6f6;
z-index: 999;
height: 90px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

.navbar-fixed-top.cbp-af-header-shrink {
height: 75px;
}

要更改大小，使用 JavaScript 添加.cpb-af-header-shrink類。讓我們看一下使這種情況發生的腳本部分：

function scrollPage() {
var sy = scrollY();
if ( sy &amp;amp;amp;amp;amp;gt;= changeHeaderOn ) {
classie.add( header, 'cbp-af-header-shrink' );
}
else {
classie.remove( header, 'cbp-af-header-shrink' );
}
didScroll = false;
}

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

CSS 粘性定位選項

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

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

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

使用位置：粘性

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

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

.navbar-fixed-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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

要注意的粘性溢出情況

溢出兼容性

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

有限的瀏覽器支持

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

@supports(position:sticky){
  .header{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

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

一開始可能看起來很複雜，但沒有理由陷入導航的常規；讓你的導航變得粘糊糊的相對簡單。通過一些簡單的 CSS 固定定位，您可以輕鬆創建粘性網站標題。使用一些簡單的 JavaScript，可以通過壓縮到降低的高度來增強固定導航，從而為用戶提供更多空間來查看網站內容。

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

在您的網站位於本地時創建一個粘性網站標題！了解更多並在此處免費下載！

本文最初於 2016 年 2 月 2 日發布。最後更新於 2018 年 10 月 14 日。