header-logo
了解如何以 Wix 建立網站和商家。
了解如何建立、管理並維護 Wix 網站。
管理訂閱、方案與請款單。
處理業務,與會員連繫。
學習如何購買、連結或轉移網站網域。
以進階功能提升效率。
尋求解決方法,了解已知問題,或聯絡我們。
placeholder-preview-image
以課程和教學加強技能。
學習網頁設計、行銷等範疇的秘訣。
學習如何提升來自搜尋引擎的自然網站流量。
以全端平台建立自訂網站。
與專家配對,幫助實現目標。
placeholder-preview-image

Studio 編輯器:新增頁首捲動效果

3 分鐘

透過實施平滑的轉場效果,強化捲動時的頁首行為。當訪客向下瀏覽頁面時,您可以讓頁首淡出或滑出檢視範圍。您還可以調整其填滿色彩和不透明度,在保持可見度的同時不干擾訪客。

這種方法不僅能提升網站訪客體驗,還能讓焦點保持在內容上,確保客戶的網站看起來精緻且專業。
使用 Studio 編輯器建置的網站範例,顯示頁首已釘選,且在訪客向下捲動時變更為綠色

新增並設定頁首捲動效果

根據頁首應有的顯眼程度,選擇其行為方式。例如,您可以讓它固定不動以便始終可見,或者讓它移開,讓訪客專注於頁面內容。
提示:
捲動效果僅套用於目前編輯的頁面。

若要為頁首套用捲動效果:

  1. 選擇頁首。
  2. 點擊編輯器右上角的 開啟檢驗器 圖示
在 Studio 編輯器中開啟檢驗器面板的螢幕截圖。
  1. 頁首設定 下,選擇 捲動效果 並進行設定:
Studio 編輯器中的頁首和檢驗器面板,正在新增「消失」捲動效果

變更捲動時的頁首背景色彩

除了為頁首選擇捲動效果外,您還可以讓它在訪客向下捲動時變更色彩。這能吸引更多對頁首的關注,確保訪客不會錯過。
提示:
此設定適用於所有顯示頁首的頁面。

若要變更捲動時的頁首背景色彩:

  1. 選擇頁首。
  2. 點擊編輯器右上角的「開啟檢驗器」圖示
在 Studio 編輯器中開啟檢驗器面板的螢幕截圖。
  1. 設計下方,啟用捲動時色彩切換開關。
  2. 點擊色彩方塊即可選擇不同色彩。
  3. (選填)拖曳滑桿即可變更不透明度。
Studio 編輯器中的頁首和檢驗器面板,正在啟用「捲動時變更色彩」切換開關,使頁首變為綠色

移除捲動效果

您可以隨時移除先前新增至頁首的捲動效果。

若要移除捲動效果:

  1. 選擇頁首。
  2. 點擊編輯器右上方的 開啟檢驗器 圖示
在 Studio 編輯器中開啟檢驗器面板的螢幕截圖。
  1. 選擇要停用的項目:
    • 捲動效果: 從下拉式選單中選擇隨網站捲動選項。
    • 捲動時色彩: 停用切換開關即可移除此效果。
螢幕截圖強調了從頁首移除捲動效果所需的特定設定

使用進階頁首設定

在檢驗器中啟用進階設定時,可更精細地控制頁首捲動效果。此檢視讓您能分別調整位置類型(即釘選、相黏)和轉場(例如:移動、淡入淡出),進而建立專屬效果,而非使用預設格式。
請注意:
預設情況下,釘選的頁首會與下一個區段重疊。若不希望頁首與下一個區段重疊,但仍想將其固定在畫面中,可改為將其設為相黏。

若要啟用進階設定:

  1. 選擇頁首。
  2. 點擊編輯器右上方「開啟檢驗器」圖示
在 Studio 編輯器中開啟檢驗器面板的螢幕截圖。
  1. 點擊大小旁的尚有...項操作圖示
  2. 啟用進階設定切換開關。
  3. 頁首設定下方調整頁首捲動效果:
    • 選擇位置類型(例如:釘選、相黏)。
    • 新增偏移量,讓頁首與頁面頂部保持一定距離。
    • 啟用轉場切換開關以新增移動淡入效果。
    • 新增捲動時色彩(位於設計下方)。
顯示頁首進階設定切換開關已啟用的 GIF。