如何頁首漸變為條狀頁首？

謝謝回覆，我跟著步驟做，但也完成不了，如下圖，請問如何解決？

我其實之前也有看過這教學，但一樣不成功。

可以啊。但必需使用開發模式，我們參考了這個教學。 簡單說一下做法:

• 如上圖一樣，但必需使用兩條帶狀圖片，一條是縮小了的，我們叫它做scrollingHeaderStrip，可以增加欄位把公司小型logo及選單固定在左右兩邊的位置。

• 另外，大/正常的那一條我們叫它做defaultHeaderStrip，是有完整公司商標在正中間。請把兩條帶狀圖片於Properties Panel更改名稱，並把小的那條設定為"Hidden"。

• 設定一條透明的帶狀圖片，我們叫它做headerTransitionPoint，把它縮成很小及放在螢幕交接之間，並設定為"在所有網頁上顯示"。設定後，檢查一下會不會在其他頁面上遮蓋了一些重要資訊，例如按鈕，有需要可調整一下。

• 把頁首設定為"凍結"，並把兩條帶狀圖片"固定於頁首"。

• 開啟開發模式，打開Code Panel，右下角"open masterPage.js"。這是用於每一頁都會載入的程式碼。

• 輸入以下代碼:

$w.onReady(function () { //網頁完成下載時
    $w("#headerTransitionPoint").onViewportLeave(() => { //物件離開視線範圍時
        let fadeOptions = { //執行淡出效果
            "duration": 1000, //執行時長1秒
            "delay": 200, //延遲執行0.2秒
        };
    $w("#scrollingHeaderStrip").show("fade", fadeOptions); //物件出現
    $w("#defaultHeaderStrip").hide("fade", fadeOptions); //物件消失
        })
    
    $w("#headerTransitionPoint").onViewportEnter(() => { //物件進入視線範圍時
        let fadeOptions = { //執行淡出效果
            "duration":   1000, //執行時長1秒
            "delay":      200, //延遲執行0.2秒
        };
    $w("#scrollingHeaderStrip").hide("fade", fadeOptions); //物件消失
    $w("#defaultHeaderStrip").show("fade", fadeOptions); //物件出現

        })

• 如果不需要淡出效果"fade"，可以把黃色Hightlight的部份刪除，或者，要好玩創新一點，不妨把所有的"fade"字改為以下任何一種動畫效果:

• "arc" Arc-In

• "bounce" - Bounce-In

• "fade" - Fade-In

• "flip" - Flip-In

• "float" - Float-In

• "fly" - Fly-In

• "fold" - Fold-In

• "glide" - Glide-In

• "puff" - Puff-In

• "roll" - Reveal

• "slide" - Slide-In

• "spin" - Spin-In

• "turn" - Turn-In

• "zoom" - Expand-In

#製作會縮小的頁首

#WixShrinkingHeader