如何构建像菜单标题的gmail

Question

如何构建像gmail菜单这样的固定菜单。我已经尝试过css，但div保持在中间位置，它不像gmail菜单在滚动时那样出现。

open in large image

我尝试过使用css属性，下面是一些示例代码（不是真正的代码）：

.menu {
    position:fixed;
    height: 36px;
    background-color:#fff;
}

Answer 1

如果scrollTop超过标题的高度，则需要使用javascript检查scrollTop并将菜单的位置设置为固定。

    function getScrollTop() {
        if(typeof pageYOffset!= 'undefined') {
            //most browsers
            return pageYOffset;
        }
        else {
            var b = document.body; //IE 'quirks'
            var d = document.documentElement; //IE with doctype
            d = (d.clientHeight) ? d : b;
            return d.scrollTop;
        }
    }

    function onScroll() {
        var menu = document.getElementById('divMyMenu');
        var headerAndNavHeight = document.getElementById('divHeader').clientHeight
            + document.getElementById('tsMain').clientHeight;

        if (getScrollTop() < headerAndNavHeight) {
            menu.style.top = headerAndNavHeight + 'px';
            menu.style.position = 'absolute';
        }
        else {
            menu.style.top = '0px';
            menu.style.position = 'fixed';
        }
    }

Answer 2

一个好的，易于使用的jQuery插件就是Waypoints

在这里你可以看到一个有效的例子：
http://imakewebthings.github.com/jquery-waypoints/sticky-elements/

Answer 3

单独固定位置不足以达到此效果。另外，position:fixed在IE7或更低版​​本中不起作用，因此您可能希望有后备。

您需要使用javascript（jQuery使其变得简单）根据您向下滚动页面的距离动态更改元素的位置。

查看.scrollTop()

http://api.jquery.com/scrollTop/

var scrollTop = $(window).scrollTop();

Answer 4

可能这就是你要找的东西 http://blog.geotitles.com/2011/10/creating-top-fixed-menu-bar-with-css3-buttons-found-in-gmail/

Answer 5

这是一个非常简单的技巧，可以通过示例和下载链接来实现您的需求。 http://itswadesh.wordpress.com/2012/02/24/google-like-top-bar-with-drop-down-menu-using-html-css-and-jquery/