将静态标头置于所有其他元素之上

Keeping Static Header Over All Other Elements

本文关键字：其他 元素 于所 静态      更新时间：2023-09-26

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

<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文件中的任何视图都会出现在头上。我需要标题覆盖所有其他元素。

有办法做到这一点吗？还是应该在重新加载所有视图后重新加载标题？

谢谢，

Filipe

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

您可以通过类以及javascript/JQuery来实现。

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

position:fixed css修饰符和具有高z-index值的show会自动执行您在滚动处理程序中正在执行的操作。

顺便说一句，您永远不应该将标头设置回static，z-index不适用于静态框。如果您在顶部需要一个空间，请在容器元素中使用padding-top或margin-top

相关文章：