对所有其他元素保持静态 Header

Question

我的索引文件中有一个 header 定义如下：

<header id="header">
    <div id="menu-trigger" class="header-button left icon-menu" ></div>
    <h1><a class='current' href="index.html#home">Title</a></h1>
</header>

我设法让它在滚动时始终处于顶部静态：

$(function() {
    console.log('Stick bar at top. . . ');
    // Stick the #nav to the top of the window
    var nav = $('#header');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                left: nav.offset().left,
                width: nav.width(),
                //z-index: 1;
            });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});

问题是我加载到 index.html 文件中的任何视图都显示在 header 上。我需要 header 覆盖所有其他元素。

有办法吗？或者我应该在重新加载所有视图后重新加载 header 吗？

谢谢，

菲利普

Answer 1

CSS Propert z-index : 1000 应该做到这一点。

您可以通过 class 和 javascript/JQuery 来完成。

Answer 2

我会尝试使用单独的 css 文件，而不是将 css 修饰符与 jQuery 一起应用。

position:fixed css 修饰符和高 z-index 值显示会自动执行您在滚动处理程序中所做的事情。

顺便说一句，您永远不应该将 header 设置回 static，z-index 不适用于静态框。如果您需要在顶部使用 space，请在容器元素

中使用 padding-top 或 margin-top

对所有其他元素保持静态 Header

Keeping Static Header Over All Other Elements

html

javascript

jquery

backbone.js

html-heading