javascript - 如何构建类似菜单标题的gmail

Question

我如何构建固定菜单，如 gmail 菜单。我试过 css，但 div 停留在中间，它不会像滚动时的 gmail 菜单那样出现。

open in large image

我试过使用 css 属性，下面是一些示例代码(不是真实代码):

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

Answer 1

您需要使用 javascript 检查 scrollTop，如果 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';
        }
    }