javascript - 如何建立类似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';
        }
    }