如何讓你的 Divi 導航從底部開始，然後在滾動時固定在頂部

已發表: 2017-07-17

在今天的 Divi 教程中，我們將逐步向您展示如何在滾動時和超過全屏高度後在您的網站上進行固定導航。如果您按照本文中的步驟重新創建固定導航，您將看到導航將為您的主菜單和整個網站帶來良好的交互效果。

我們將首先在屏幕上創建一個普通的垂直導航。此導航將被推送到屏幕底部，而不是位於頁面頂部。滾動並超過屏幕的菜單高度後，您將看到菜單將改變其位置並放置在頁面頂部。一旦導航變得固定，它將在整個頁面的其餘部分保持固定。但是，一旦您滾動回英雄部分，導航將再次正常運行並位於英雄部分的底部。

您可以說該頁面將“選取”屏幕底部的菜單並提供您正在尋找的高級效果。為了幫助您可視化我們試圖實現的結果，讓我們看一下最終結果：

英雄部分：全屏模式的全寬標題模塊

當您打算在您的網站上使用這種效果時，需要考慮一件事；你需要一個全屏模式的標題模塊。理論上，您也可以將其應用於其他模塊和部分，但您必須進行一些修改以確保菜單出現在該部分的底部。 Divi 提供的全屏選項可確保英雄部分填滿屏幕（無論屏幕尺寸如何），這就是為什麼如果您想將此效果應用於菜單，我們建議使用它。

首先打開或創建要添加此效果的頁面。接下來，打開 Fullwidth Header 或創建它並轉到 Design 選項卡。您將在設計選項卡中遇到的第一件事是佈局子類別。繼續並在該子類別中啟用全屏模式。

滾動時創建固定導航

要將效果添加到我們的網站，我們需要同時使用一些 CSS 代碼行和一些 jQuery 代碼行。我們將使用的 CSS 代碼將把導航放在屏幕底部，並在 jQuery 代碼被激活之前使其表現得像一個普通的頁腳。之後，jQuery 代碼行將取代自定義 CSS 代碼，並使導航根據您在網站上的位置進行操作。

添加所需的 CSS 代碼

我們將首先向我們的網站添加所需的 CSS 代碼。一般來說，有三種方法可以做到這一點。前兩種方式使代碼適用於整個網站。第三種方法使其僅適用於一頁。

通過主題定制器添加 CSS 代碼

我們將向您展示的第一種方法允許您通過主題定制器添加代碼。這是一種不常用的添加代碼的方法，但它有一些好處。其中之一是，一旦添加了代碼，您就會注意到實時發生的更改。

要添加 CSS 代碼，請打開您的 WordPress 儀表板 > 轉到外觀 > 自定義 > 向下滾動選項卡並打開附加 CSS 選項卡 > 添加以下 CSS 代碼行：

#main-header {
position: absolute;
top: auto;
bottom: 0;
}

通過主題選項添加 CSS 代碼

您擁有的另一個選項，也是最常用的選項，是將 CSS 代碼添加到您的 Divi 網站的主題選項中。添加代碼後，它將應用於整個網站。如果您更願意尋找一種僅將效果添加到一頁的可能性，請轉到下一種可能性，您可以將代碼添加到特定的一頁。

將代碼添加到您的主題選項； 轉到您的 WordPress 儀表板 > Divi > 主題選項 > 向下滾動常規選項卡並將以下代碼粘貼到自定義 CSS 字段中：

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

僅將 CSS 代碼添加到一頁

如果您只想將此固定導航應用於一個頁面而不是網站的其餘部分，則這種可能性可能會很有趣。例如，如果您僅在主頁上使用全角標題，則可能需要使用此方法。

滾動時打開要添加固定導航的頁面。接下來，您將在構建器的右上角看到以下符號：

單擊它，您將看到一個屏幕，您可以在其中對整個頁面進行修改。在自定義 CSS 框中添加以下代碼，使其特別適用於該頁面：

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

添加所需的 jQuery 代碼

我們要採取的下一步是將 jQuery 代碼添加到我們的 WordPress 網站。此代碼將從您滾動的那一刻開始工作。我們可以通過兩種方式添加 jQuery 代碼；通過主題選項或通過代碼模塊。如果您只想將代碼添加到一個頁面，您可以結合我們在本文中為 CSS 代碼提到的第三種可能性使用代碼模塊。

通過主題選項添加 jQuery 代碼

要將代碼應用於您網站上的所有頁面，您可以將代碼添加到主題選項。 轉到您的 WordPress 儀表板 > 轉到 Divi > 繼續主題選項 > 打開集成選項卡 > 並將以下代碼粘貼到“<head> of your blog”字段中：

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

通過代碼模塊添加jQuery代碼

如果您想將代碼特別添加到一個頁面，您可以通過代碼模塊來完成。在上一部分中，我們添加了 CSS 代碼，您必須選擇最後一個選項。

返回該頁面並在頁面頂部添加一個標準部分。在該標準部分中，添加一個代碼模塊。您實際上可以將此部分放在您喜歡的任何位置，但如果您想快速找到它，我們建議您將其放在頁面頂部。接下來，將以下代碼複製並粘貼到代碼模塊的內容框中：

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

就是這樣！代碼現在應該可以工作，轉換您的菜單並使您的網站更具交互性。

最後的想法

在這篇文章中，我們向您展示瞭如何在滾動時創建固定導航。我們為您提供了一些 CSS 代碼行和一些應該可以解決問題的 jQuery 代碼行。如果你一步一步地關注這篇文章，你應該能夠得到最終的結果。如果您對即將發布的帖子有任何問題或建議；隨時在下面的評論部分發表評論！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

特色圖片由 DenisXize/shutterstock.com 提供