jQuery - header & floating menu - dynamic detect & adjust

相信很多人都有手機相關APP的使用經驗，這些APP的介面，大多最上方會有一個Header，Header裡面可能放了一些主題名稱、功能按鈕等等。接著，我們按了某個按鈕之後，最常看到就是會跑出一個功能選單，這個功能選單是蓋在內容上方的，如圖：

我昨天花了點時間，使用HTML及CSS，把這東西實做出來了，基本上的技巧就是延續之前介紹footer的做法，透過css設定 position:fixed; 以固定Header及Menu的位置，然後內容Content上方保留一些空間，padding Header的高度。

本來以為這樣就很棒了，Perfect！但今天測試的時候發現一個問題！由於我的Title是依照顯示內容會動態改變，當這個Title文字過長而換行的時候，糟糕了，那個位置固定的話就會錯亂，如下：

看到了嗎？Menu選單顯示時應該下移一點配合Header的高度，而且Content第一行也被Header蓋住了！所以怎麼解決這問題呢？我今天想來想去，目前想到的做法是，當Header高度有改變的時候，我就跟著調整Menu跟Content的位置設定。而這個方法要完成，需要解決兩件事情，第一件事情是我要知道Header的實際高度，而第二件事情是，高度改變的時候要觸發處理事件。

先從第一件事情來，在jQuery裡有個方法叫outerHeight()，它會回傳我們所選取物件目前的實際高度。我們取得實際高度之後，接著去設定Menu及Content，如下：

function HeaderResize()
{
// Header高度變動時,動態調整Page及Menu顯示的位置
var headerHeight = $('#header_title').outerHeight();
$('#PopupMenu').css('top', headerHeight);
$('#content').css('padding', headerHeight + ' 0 0 0');
}

接著第二件事情就是，我們要在高度改變的時候觸發這個處理function。高度改變有兩種狀況，第一種狀況是我們在瀏覽的時候改變了視窗大小而導致Title過長換行；第二種狀況是視窗雖然固定，但是動態改變Title內容的時候，Title過長而換行。於是我們針對這兩種狀況做binding。如下：

$(document).ready(function()
{
$(window).resize(HeaderResize);
$('#header_title').bind('HeaderResize', HeaderResize);
});

當動態改變Title時要主動觸發。如下：

$('#header_title').html('你的新Title').trigger('HeaderResize');

OK! 這樣就完成了！測試：

希望大家會喜歡~~ XD
附上完整檔案download：
https://docs.google.com/file/d/0B0kC-urN3g_jWnFkQ2o3UEVDV3c/edit?usp=sharing