• 主頁
  • 文章
  • 主題
  • 如何在向上滾動時顯示全局標題並在使用 Divi 向下滾動時隱藏

如何在向上滾動時顯示全局標題並在使用 Divi 向下滾動時隱藏

已發表: 2019-12-11

創建全局標頭時，需要考慮許多事項。 您放置在標題中的元素需要幫助您的訪問者輕鬆導航。 為了減少人們花在導航上的時間，許多網頁設計師選擇固定的頂部標題，允許訪問者立即轉到其他頁面或帖子。 這真的很方便，但是在創建固定標題時，訪問者的視口高度的很大一部分會被佔用，從而減少了一次顯示的內容。 如果您不願意做出這種犧牲，請知道您不必這樣做。 通過允許您的全局標題在您的訪問者向上滾動時顯示並在他們向下滾動時隱藏它，您可以獲得固定標題的好處。 今天，我們將指導您使用 Divi 的 Theme Builder 隱藏和顯示您的全局標題。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

顯示全局標題

移動的

顯示全局標題

免費下載全局標題模板

要使用免費的全局標題模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件
免費下載

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

1.轉到Divi Theme Builder並添加新模板

轉到 Divi 主題生成器

首先轉到Divi Theme Builder。

顯示全局標題

開始構建全局標題

在那裡，單擊“添加全局標題”並選擇“構建全局標題”。

顯示全局標題

2. 開始構建全局標題

部分設置

背景顏色

在模板編輯器中，您會注意到一個部分。 打開該部分並更改其背景顏色。

  • 背景顏色：#ffffff

顯示全局標題

漿紗

轉到設計選項卡，然後為您的部分指定 100% 的寬度。

  • 寬度：100%

顯示全局標題

間距

也添加一些自定義的頂部和底部填充。

  • 頂部填充：2vw
  • 底部填充：2vw

顯示全局標題

盒子陰影

我們還將對我們的部分應用一個微妙的框陰影。

  • 框陰影模糊強度：50px
  • 陰影顏色：rgba(0,0,0,0.08)

顯示全局標題

CSS ID

在本教程的後面，我們將需要一些自定義代碼來實現滾動效果。 為此，我們將向該部分添加一個 CSS ID。

  • CSS ID：全局標題部分

顯示全局標題

主要元素

我們還將通過向該部分的主要元素添加兩行 CSS 代碼，將該部分變成一個固定的頭部。 

position: fixed;
top: 0;

顯示全局標題

Z索引

現在，為了確保我們的部分出現在所有頁面或帖子內容的頂部，我們還將增加可見性設置中的 z 索引。

  • Z指數：99999

顯示全局標題

添加新行

列結構

完成所有部分設置後，繼續使用以下列結構向該部分添加新行：

顯示全局標題

漿紗

還沒有添加任何模塊，打開行設置並允許行佔據屏幕的整個寬度。

  • 使用自定義裝訂線寬度：是
  • 天溝寬度：1
  • 均衡柱高：是
  • 寬度：100%
  • 最大寬度：100%

顯示全局標題

間距

也刪除所有默認的頂部和底部填充。

  • 頂部填充：0px
  • 底部填充：0px

顯示全局標題

主要元素

通過向行的主要元素添加兩行 CSS 代碼，將列內容居中並允許列在較小的屏幕尺寸上保持彼此相鄰。 

display: flex;
align-items: center;

顯示全局標題

將社交媒體關注模塊添加到第 2 列

添加社交網絡

是時候添加模塊了，從第 1 列中的社交媒體關注模塊開始。添加您想要顯示的社交網絡。

顯示全局標題

重置個人社交網絡風格

繼續在個人級別重置每個社交網絡的樣式。

顯示全局標題

添加個人社交網絡間距

您還需要單獨打開每個社交網絡的設置，並在間距設置中添加底部填充。

  • 底部填充：0.5vw

顯示全局標題

結盟

將底部填充單獨添加到每個社交網絡後，請返回到您的常規模塊設置。 移至設計選項卡並更改模塊對齊方式。

  • 模塊對齊：居中

顯示全局標題

默認圖標設置

也可以在圖標設置中更改圖標顏色。

  • 圖標顏色：#000000

顯示全局標題

懸停圖標設置

並在懸停時修改圖標顏色。

  • 圖標顏色：#c2ab92

顯示全局標題

邊界

通過在邊框設置中添加底部邊框來完成模塊的設置。

  • 底部邊框寬度：1px
  • 底部邊框顏色：#000000

顯示全局標題

將菜單模塊添加到第 2 列

選擇菜單

進入下一欄！ 添加菜單模塊並選擇您選擇的菜單。

顯示全局標題

上傳標誌

接下來將徽標上傳到模塊。

顯示全局標題

刪除背景顏色

並去除背景色。

顯示全局標題

佈局

然後，轉到設計選項卡並確保以下設置適用於佈局：

  • 風格：居中
  • 下拉菜單方向：向下

顯示全局標題

默認菜單文本

繼續更改菜單文本設置，如下所示：

  • 活動鏈接顏色：#c2ab92
  • 菜單字體：Cormorant Garamond
  • 文字顏色：#000000
  • 菜單文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）

顯示全局標題

懸停菜單文本

在懸停時修改菜單文本。

  • 菜單文字顏色：#c2ab92

顯示全局標題

下拉式菜單

接下來，在下拉菜單設置中更改下拉菜單行顏色。

  • 下拉菜單行顏色：#000000

顯示全局標題

圖標

我們也在更改圖標設置中的漢堡菜單圖標顏色。

  • 漢堡菜單圖標顏色：#000000

顯示全局標題

漿紗

繼續在大小設置中更改不同屏幕尺寸的徽標最大寬度。

  • 徽標最大寬度：5vw（桌面）、10vw（平板電腦）、13vw（手機）

顯示全局標題

菜單鏈接 CSS

並通過在高級選項卡的模塊菜單鏈接中添加兩行 CSS 代碼來完成模塊的設置。 

padding-bottom: 1vw;
border-bottom: 1px solid #000;

顯示全局標題

將文本模塊添加到第 3 列

添加副本

進入最後一個模塊！ 在那裡，我們需要的唯一模塊是文本模塊。

顯示全局標題

添加鏈接

該模塊將用作 CTA。 添加您選擇的鏈接。

  • 模塊鏈接網址：#

顯示全局標題

默認文本設置

轉到模塊的設計選項卡並相應地更改文本設置：

  • 文字字體：鸕鶿 Garamond
  • 文字顏色：#000000
  • 文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）

顯示全局標題

懸停文本設置

更改懸停時的文本顏色。

  • 文字顏色：#c2ab92

顯示全局標題

漿紗

繼續在不同的屏幕尺寸上更改模塊的尺寸設置。

  • 寬度：12vw（桌面）、18vw（平板電腦）、22vw（手機）
  • 模塊對齊：居中

顯示全局標題

間距

並在間距設置中添加一些底部填充。

  • 底部填充：0.5vw

顯示全局標題

邊界

通過添加底部邊框來完成模塊的設置。

  • 底部邊框寬度：1px
  • 底部邊框顏色：#000000

顯示全局標題

將代碼模塊添加到第 2 列

插入 JQuery 和 CSS 代碼

一旦您為行中的所有模塊設置了樣式，就可以顯示/隱藏效果了。 為此，我們需要將一些自定義代碼添加到我們將放置在第 2 列中的代碼模塊中。此代碼將適用於您添加的任何部分，無論您如何設計標題或使用什麼模塊，只需確保您已將 CSS ID 添加到您的部分。 將 JQuery 代碼放在 script 標籤之間，將 CSS 代碼放在 style 標籤之間，如下面的打印屏幕所示。 

jQuery(function($){
  
var topPosition = 0;


$(window).scroll(function() {

    var scrollMovement = $(window).scrollTop();
  
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
  
});
#main-content{
margin-top: 7vw;
}

.hide-header {
opacity: 0;
margin-top: -200px !important;
}

.show-header {
opacity: 1;
margin-top: 0px !important;
}

#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

顯示全局標題

3. 保存構建器更改並查看結果

完成全局標題後，保存所有更改並在您的網站上查看結果！

顯示全局標題

顯示全局標題

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

顯示全局標題

移動的

顯示全局標題

最後的想法

在這篇文章中，我們向您展示瞭如何使全局標題在向上滾動時顯示並在向下滾動時隱藏。 這是一種流行且有效的方法，可幫助您的訪問者輕鬆導航，而無需佔用其視口高度的一部分。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。