如何製作浮動頂級菜單？

Question

我要實現的菜單是這樣的：你在頁面上向下滾動 http://craigsworks.com/projects/qtip2/tutorials/

每次，一個特定的DIV菜單總是停留在頂端。

任何幫助或教程鏈接頁，非常感謝。

下面是截圖：

http://www.pokoot.com/menu.png

www.pokoot.com/menu2.png

Answer 1

您可以修復使用CSS元素的位置。例如，

#floatingMenu { 
    position: fixed; 
    top: 0px; 
} 

將保持#floatingMenu頁面隨時頂部。然後，如果您想模仿他們的定位菜單欄不顯示，直到您滾動頁面上的某個點，您可以執行如下操作：

$docBody = $(document.body); 
$docBody.scroll(function() { 
    // replace 100 with whatever the non-floating menu bar's distance from the top of the page is 
    if ($docBody.scrollTop() < 100) { 
     $('#floatingMenu ').hide(); 
    } else { 
     $('#floatingMenu ').show(); 
    } 
});