如何制作浮动顶级菜单？

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(); 
    } 
});