用jQuery製作Gmail title bar效果

312253_2292828369972_1904420582_n

昨天一個新需求來,要做類似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,這樣外掛才可以正常運作。

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

留言

熱門文章