[教學]讓部落格導覽列選單能浮動置頂__更新版

關於浮動導覽列的優點，為了節省篇幅請直接參考「舊版」→「一、導覽列置頂的優點」。不過舊版有以下的狀況未解決：

1. 底色透明的異常狀況
2. 留言 #9 +Ken Lo 表示「搜尋框會左右移動」
3. 當螢幕解析度不同時，導覽列的寬度會異常

因此本文的更新版，用來解決以上情形。以下先大致說明原理，想直接安裝程式碼請跳「二、安裝程式碼」。

點此看範例網頁

<< 請注意！本篇文章含會員限定內容 >>

一、解決異常狀況的原理

1. 底色透明的異常狀況

在某些範本，例如 Blogger 官方的「簡單範本」，導覽列底色為透明，使用舊版程式碼時，不但透明的浮動導覽列效果很差，而且沒有頁籤的部位，在浮動的時候會消失。

◎ 解決方法：浮動時自動加上底色，非浮動時改回原底色；並事先抓取導覽列的寬度值，浮動時幫導覽列加上寬度。


2. 導覽列的搜尋框會左右移動

某些範本的導覽列會擺置搜尋框，而這種搜尋框通常使用「浮動靠右」的語法。當導覽列浮動時，原本的「浮動靠右」語法會失效，導致搜尋框往左移；等導覽列回到原始位置時，搜尋框才再次浮動靠右。

◎ 解決方法：同第一點，事先抓取導覽列的寬度值，浮動時幫導覽列加上寬度，搜尋框便不會亂跑了。


3. 當螢幕解析度不同時，導覽列的寬度會異常

這一點如同舊版內容 →「三、注意事項」→「4. 導覽列未設寬度」的示意圖，導覽列浮動時，導覽列寬度會撐大，若螢幕解析度改變時，就會看到異狀。

◎ 解決方法：同第一點，事先抓取導覽列的寬度值，浮動時幫導覽列加上寬度，導覽列便可固定寬度了。

二、安裝程式碼

瞭解原理後，程式碼稍加調整就能解決各種狀況。而且為了安裝懶人化，這次的安裝步驟只有一個。在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

如有安裝舊版「讓部落格導覽列選單能浮動置頂」，請先移除原本程式碼，然後按以下步驟進行：

1. 到後台「範本」→「編輯 HTML」→ 搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：

2. 請參照以上程式碼行號，修改以下參數：

G：如果是 Blogger 官方的範本，這一行通常不需要改，導覽列區塊就是在這裡；如果不是官方範本、或改過範本的話，可參考「Google Chrome 開發人員工具」來找到導覽列的區塊，然後置換本行的紅色字串──

• 如果要填入區塊的 id，請填入 "#" + id 名稱，例如 "#navbar"。
• 如果要填入區塊的 class，請填入 "." + class 名稱，例如 ".navbar"。

H：藍色數字的參數為導覽列到網頁頂端的距離(px值)。如果頁面頂端官方的選單導覽列(有 "下一個網誌" 那一欄)沒有隱藏的話，此行的數字說不定要設為 -30，請自行測試調整。

I：本文的程式碼設計了導覽列透明程度的參數，可填入 0 ～ 1 的數字，0 代表完全透明，1 代表不透明。

J：請依照綠色字串的註解，依導覽列的底色決定不設定字串、或是設定底色。想查詢色碼可參考這個「網頁色碼選擇器」。

點此看範例網頁

三、補充

相信這個更新版已經能解決大部分的異常狀況，剩餘的就是導覽列若有特殊形狀的頁籤，請依照舊版 →「三、注意事項」→「1. 頁籤形狀」與「2. 顏色、透明度」的說明來進行處理了。

Blogger 導覽列相關技巧：