如何制作浮动顶级菜单？

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