Question

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

<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文件中的任何视图都显示在标题上。我需要标题超过所有其他元素。

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

谢谢，

菲利普

Answer 1

CSS Property z-index：1000应该这样做。

你可以通过课程以及javascript / JQuery来完成。

Answer 2

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

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

顺便说一句，您不应该将标题设置回static，z-index不能用于静态框。如果您需要顶部的空格，请在容器元素

中使用padding-top或margin-top

将静态标头保持在所有其他元素上

2 个答案: