用jQuery製作Gmail title bar效果

昨天一個新需求來，要做類似Gmail那樣的title bar，也就是一般的時候他是在我們看到的位置，當我們把內容往下拖曳，到超過頁面高度的時候，title bar就會卡在畫面的上方。這樣對於Usability來說是一個很棒的設計，因為我們可以在同一個頁面內，看到每個內容是屬於哪一個項目。

製作方法很簡單，首先請到New Gmail like Floating Toolbar jQuery Plugin: v. 1.0下載外掛。

引入外掛。
<script type="text/javascript" src="fixFloat.jquery.js"></script>
然後像這樣使用外掛就可以了。
$(function(){
$(selector).fixFloat(); /**Call our plugin**/
});
值得注意的是，要使用的selector要先把他的position設定為absolute，這樣外掛才可以正常運作。

這邊可以看看使用後的效果。