如何在导航栏上方制作标题？
Posted
技术标签:
【中文标题】如何在导航栏上方制作标题？【英文标题】：How do I make a header above my navigation bar? 【发布时间】：2013-04-22 06:30:36 【问题描述】：我正在尝试创建一个带有标题的导航栏。我希望它是这样，导航栏一旦到达屏幕顶部就会粘住（我自己已经解决了），但它上面的任何东西都不会粘住（将正常滚动到屏幕外）。我正在尝试做的一个很好的例子是Happy Cog。去那里并向下滚动直到标题消失但导航栏保持可见并显示连接到浏览器窗口的顶部。这就是我想要的：将标题放在导航栏上方并在滚动时消失，但导航栏保持在浏览器的顶部。我想确保它的滚动和运行也和他们的一样流畅——不会跳来跳去或跳到窗口的顶部。如何将内容放在导航栏上方并使其在导航菜单出现时不会粘在哪里？
非常感谢你们能提供的任何帮助！非常感谢！
我的 html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header role="banner" id="top">
<div id="navbar" class="banner">
<div id="header-text">
<h1>
<strong id="top-title">
Atlas Land Office (text will change)
</strong>
</h1>
<p id="slogan">
Keeping lands fresh.
</p>
</div>
<div id="menu">
<ul role="navigation" class="banner">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#land">Land Surveying</a>
</li>
<li id="nav-space-left">
<a href="#civil">Civil Engineering</a>
</li>
<li id="nav-home">
<a href="#top" title="Back to top">
<img src="#logo" />
</a>
</li>
<li>
<a href="#planning">Land Planning</a>
</li>
<li>
<a href="#company">Company</a>
</li>
<li>
<a href="#careers">Careers</a>
</li>
</ul>
</div>
</div>
</header>
</body>
</html>
我的 CSS（到目前为止，我还没有完成）：
body
height: 3000px;
top: 0;
position: relative;
#navbar
position: relative;
width: 1329px;
height: 44px;
background: #CCC;
margin-left:-8px; /* Connects the navigation menu to the left "wall" */
margin-top:-8px;
top: 100px;
padding-left:10px;
padding-right:10px;
我的 jQuery：
$(window).scroll(function ()
if ($(window).scrollTop() > 100)
$('#navbar').css('top', $(window).scrollTop());
);
【问题讨论】：
请不要全部大写。 Stack 提供 Markdown 标记，以在您需要时强调和加粗文本。 【参考方案1】：我稍微更改了您的代码，现在可以正常工作了。在Chrome测试过
HTML
<body>
<header role="banner" id="top">
<div id="header-text">
<h1><strong id="top-title">Atlas Land Office (text will change)</strong></h1>
<p id="slogan">Keeping lands fresh.</p>
</div>
<div id="menu">
<ul role="navigation" class="banner">
<li><a href="#home">Home</a> </li>
<li><a href="#land">Land Surveying</a></li>
<li id="nav-space-left"><a href="#civil">Civil Engineering</a></li>
<li id="nav-home"><a href="#top" title="Back to top"><img src="#logo" ></a></li>
<li><a href="#planning">Land Planning</a></li>
<li><a href="#company">Company</a></li>
<li><a href="#careers">Careers</a></li>
</ul>
</div>
</header>
</body>
CSS
body
height: 3000px;
top: 0;
position: relative;
#header-text
height:200px;
border:2px solid;
#menu
display:block;
#menu ul
width:1000px;
background-color:#666;
border:1px solid;
height:30px;
#menu ul li
float:left;
padding:5px;
list-style:none;
#menu ul li a
color:white;
text-decoration:none
.fixnav
position:fixed;
top:0;
z-index:1000;
JQUERY
$(window).scroll(function ()
if ( $(window).scrollTop() > 200)
$("#menu").addClass("fixnav");
else if ($(window).scrollTop() < 200)
$("#menu").removeClass("fixnav");
);
【讨论】：
非常感谢您的帮助！对此，我真的非常感激！我要过一遍并比较不同的代码，看看做了什么。 :)以上是关于如何在导航栏上方制作标题？的主要内容，如果未能解决你的问题，请参考以下文章
如何在导航栏中舍入当前选项卡上方和下方的选项卡，除了当前选项卡之外，还隐藏导航栏