标题中的粘滞导航栏

时间:2014-01-22 14:49:44

标签: html css menu header navigation

您好我正在尝试让我的导航菜单保持在我的页面顶部。

帮助的搜索栏位于顶部,但我希望main为导航,并且在 StackExchange 的位置,但更多左侧是我的徽标。

当我向下滚动时,nav menu-header堆叠在顶部,内容在其后面。

我没有代码,因为我很生气,我不知道从哪里开始我试图在一个div中做所有,但没有发生......在此之后我试图解决它们(我已经让他们一个在另一个下面)这种方式,但只有导航菜单固定和标题消失,但当我修复标题...这是不可能向下滚动....如果有人可以给我HTML和CSS示例,我会真的很高兴....因为我不知道如何做到这一点

2 个答案:

答案 0 :(得分:7)

设置标题以使其具有如下css属性:

基本HTML:

<html>
    <head><title>Sticky header</title><head>
    <body>
        <div id="header>Your nav goes here</div>
        <div id="content">Content things go here.</div>
    </body>
</html>

<强> CSS

#header {
    position: fixed;
    top: 0;
    z-index: 500;
    height: 45px;
}

#content {
    padding-top: 50px;
}

通过这种方式,无论用户是否向下滚动,您都可以确保您的标题始终可见,并且z-index是为了确保标题始终位于其他内容的顶部,如果您有模态,给模态z-index:1000;这样你就可以确保你的标题不会削减模态。

希望这有帮助。

答案 1 :(得分:0)

试试这个:

.navbar {
 position: fixed;
 top:0;
 right: 0;
 left: 0;
 z-index: 1030;
}