如何使任何 Divi 頁面元素具有粘性

知道如何使任何 Divi 頁面元素具有粘性（或固定）是網頁設計師可以通過多種方式使用的便捷技能之一。 如果您不熟悉術語“粘性”，它只是指當用戶向下滾動頁面時網頁上保持“固定”的元素。 粘性元素的一個流行示例是固定導航菜單。 默認情況下，Divi 具有固定（或粘性）導航功能。 因此，當用戶向下滾動頁面時，固定版本的菜單會在用戶滾動時停留在頁面頂部。 但是粘性元素幾乎可以用於任何事情，這是在任何給定頁面上引起人們對所需行動號召的注意的好方法。

在本教程中，我將向您展示一種簡單的方法，通過在 Scroll 上使用名為“粘性菜單”（或任何東西！）的插件，使頁面上的任何元素具有粘性。 只需花一些時間來配置插件設置。 然後你需要做的就是為你的元素添加一個自定義的 CSS ID。 就這麼簡單。

讓我們開始吧！

本教程需要什麼

對於本教程，您將需要以下內容：

• 迪維主題
• 滾動插件上的粘性菜單（或任何東西！）
• 會計師博客頁面佈局（可從 Divi Builder 中獲得）

如何使任何 Divi 頁面元素具有粘性

訂閱我們的 YouTube 頻道

配置插件設置

一旦您在 Divi 主題上安裝並激活了 Scroll 插件上的粘滯菜單（或任何東西！），請前往 WordPress 儀表板並導航到設置 > 粘滯菜單（或任何東西！）。

在基本設置選項卡下，更新選項如下：

首先，您需要為粘性元素添加唯一標識符。 這可以是 CSS ID 或類。 然後我們稍後會將此標識符添加到我們在 Divi 中的元素中。 為了便於記憶，我將添加 CSS ID“#sticky”。

粘性元素：#sticky

然後您需要為頁面頂部和粘性元素之間的空間添加像素值。 由於 Divi 的固定導航欄默認高度為 54 像素，我們希望為此選項添加至少 54 像素，以便我們的粘性元素不會與固定導航重疊。

頁面頂部和粘性元素之間的空間：54 像素

在移動設備上禁用粘性元素也是一個好主意。 為此，我們需要將插件配置為在屏幕小於 980 像素時不粘貼元素。

屏幕小於 980 像素時不要粘貼元素

保存您的設置，然後轉到“高級設置”選項卡並更新以下內容：

對於 z-index 選項，我們希望確保我們的元素堆疊在頁面上所有其他元素的頂部，特別是如果我們計劃我們的元素在滾動時與其他元素重疊。 為確保發生這種情況，請將 z-index 設置為 99998。

Z指數：99998

為了讓您了解元素在 Divi 中的排序方式，部分的 z-index 為 2，列的 z-index 為 9，標題/導航欄的 z-index 為 99999。所以基本上，我們是希望我們的粘性元素比標題導航的 z-index 低 1 個數字。 這將確保粘性元素位於頁面上除導航之外的所有其他內容之上。 每當您想要停止元素並將其向上推到頁面時，這將派上用場，這樣在您滾動時粘性元素就不會位於導航頂部（看起來凌亂和破碎）。

接下來，我們可以添加一個“向上推”元素標識符。 您可以將其視為我們的粘性元素的塞子。 這通常是一個頁腳元素。 基本上，這標識了在向下滾動頁面時將停止粘性元素的元素，允許粘性元素與頁面的其餘部分一起向上推。 對於本示例，我將使用 CSS ID“#stop”設置標識符。

俯臥撑元素：#stop

保存設置。

現在我們配備了製作粘性元素所需的力量！

使 Divi 頁面元素具有粘性

為了向您展示如何使 Divi 元素具有粘性，我將使用 Accountant Layout Pack 中的 Divi 會計師博客頁面。 首先，創建一個新頁面，為頁面指定標題，然後部署 Visual Builder。 然後選擇“選擇預製佈局”選項。 從庫加載彈出窗口中，選擇 Accountant Layout Pack 並選擇博客頁面。

此頁面在專業部分的右側欄中提供電子郵件訂閱選擇表單。 為了吸引更多人注意這個表單，我們可以在用戶向下滾動頁面時使其變得粘滯。 然後我們可以讓元素在到達頁面的下一部分時停止（或上推），這樣它就不會重疊。

如何使列具有粘性

不過，此時，我們需要決定要使什麼特定元素具有粘性。 我們可以只使電子郵件選項模塊具有粘性，但這不會考慮直接位於表單下方的社交媒體關注模塊，我們也希望將其設置為粘性。 而且，我們可以為這兩個模塊提供相同的標識符，因為它們會在同一位置變得粘性，從而導致重疊。 最好的方法是使整個列（第 2 列）具有粘性。

要使第 2 列具有粘性，請打開包含我們要定位的列的行的行設置。 然後，在 Advanced 選項卡下，添加 CSS ID“sticky”。 這對應於我們在插件設置中添加的粘性元素唯一標識符。

CSS ID：粘性

（注意：不要在此處的 ID 之前放置主題標籤（或磅）符號。另外，請確保將其添加到 CSS ID 而不是 CSS 類）

保存設置並預覽頁面的實時版本。 如果向下滾動，您會注意到第 2 列（包含兩個模塊）在距離窗口頂部 54px 時變得粘滯，並在您繼續滾動時保持在該位置。

在部分停止粘性元素

如您所見，該元素繼續保持粘性，因此它與下面其他部分的內容重疊。 為了阻止這種情況發生，我們可以使用我們在插件設置中添加的“上推”標識符（#stop）。

要停止下面部分的粘性元素，我們需要打開部分設置並添加 CSS ID“停止”。

CSS ID：停止

現在去預覽頁面的實時版本。 注意粘性元素如何在您標識的部分停止。

很酷吧？

如何使模塊具有粘性

要使單個模塊具有粘性，您需要在 Divi 中進行調整以確保您的元素具有正確的 z-index，以便在滾動時它位於整個頁面的其他元素之上。 正如我之前提到的，Divi 為所有部分分配了 2 的 z-index。 插件將 99998 的 z-index 應用於粘性元素。 但是由於模塊不能在其父元素（節）上方排序（或索引），該模塊仍將位於頁面上的其他模塊之後。 為了解決這個問題，我們需要確保並手動為保存我們的粘性模塊的部分提供 99998 的 z-index。

為了說明這一點，我將使用我們之前使用的相同的會計師博客頁面佈局。 在將 CSS ID 添加到模塊之前，首先，我們需要取出我們為第 2 列設置的 CSS ID（粘性）。然後取出我們為其下方部分設置的 CSS ID（停止）。 之後，打開社交媒體關注模塊設置並將CSS ID“sticky”添加到模塊中。

如果您查看實時頁面，您會注意到當您滾動時與以下部分中的其他模塊重疊時，粘性元素被隱藏。

要解決此問題，請打開包含社交媒體關注模塊粘性元素的部分的部分設置。 然後將以下自定義 CSS 添加到主元素：

z-index: 99998;

現在檢查實時頁面。 請注意社交媒體圖標將如何固定在頁面頂部（距頂部 54 像素），就在固定導航下方，然後在滾動時保持在其他模塊上方。

使部分具有粘性

要使整個部分具有粘性，您可以遵循相同的過程，將 CSS ID“粘性”添加到您選擇的部分。 無需使用自定義 css 更新 z-index，因為插件會自動為您完成。

懸停效果可能會導致粘性元素出現故障

如果您在整個頁面或粘性元素上都有活動的懸停效果，您可能會遇到一些小故障。 如果發生這種情況，您可能需要停用粘性元素懸停效果。

每頁只有一個粘性元素

該插件每個頁面只允許一個粘性元素，因此如果您想添加多個粘性元素，您將需要更高級的解決方案（或其他支持此功能的插件）。

最後的想法

我希望這篇文章有助於提供一種令人耳目一新的簡單方法來使任何 Divi 頁面元素具有粘性。 使用它來創建粘性子菜單、粘性 CTA、粘性促銷優惠以及您能想到的任何其他內容。 盡情探索各種可能性！

我期待在下面的評論中收到您的來信。

乾杯!