标题中的粘性导航栏[关闭]
Posted
技术标签:
【中文标题】标题中的粘性导航栏[关闭]【英文标题】：Sticky navigation bar in header [closed] 【发布时间】：2014-02-12 16:47:25 【问题描述】：您好，我正在尝试让导航菜单保持在页面顶部。
帮助位于顶部的搜索栏，但我希望主要是导航，并且在 StackExchange 所在的位置，但左侧更多是我的徽标。
当我向下滚动时，nav menu-header 堆叠在顶部，内容在其后面。
我没有代码，因为我很生气而且我不知道从哪里开始使它们一个下一个）这样，但只有导航菜单固定，标题消失了，但是当我修复标题时......不可能向下滚动......如果有人能给我html和CSS示例，我会很高兴......因为我不知道该怎么做
【问题讨论】：
使用互联网卢克！ “我没有代码，因为我很生气而且我不知道从哪里开始我试图在一个 div 中制作所有内容，但什么也没发生” --- 这就像告诉你汽车修理工朋友，你没有车可以给他看，但你知道它坏了，他能把它修好吗，即使它在三个县以外的沟里。 【参考方案1】：设置您的标题以使其具有如下 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 是为了确保标题始终位于其他内容之上，如果您有modals, 给出模态 z-index: 1000;这样您就可以确保模态框不会被您的标题剪切。
希望这会有所帮助。
【讨论】：
这是解决方案的一部分，尽管没有办法真正判断 OP 是否已经安排了他的标记以便它可以工作。您还需要设置一些顶部填充或边距，以确保不会隐藏在 neth 下的内容，因为position: fixed 会从文档流中删除 #header div。
这只是一个示例，以便将其应用于他的标记。不过，我只是编辑了一个基本的 html 示例。
当然，与其说是批评（至少你提供了一些代码和解释！）不如说是改进。
好吧，他提出的要求很明确，尽管他可以提供他的一些代码，但我认为通过基本的 html 示例，他可以将其应用于他的（或任何）标记。
谢谢你，我认为这可能有效，我现在就试试））【参考方案2】：
试试这个：
.navbar
position: fixed;
top:0;
right: 0;
left: 0;
z-index: 1030;
【讨论】：
以上是关于标题中的粘性导航栏[关闭]的主要内容，如果未能解决你的问题，请参考以下文章