如何在导航栏上方添加标题？

-6

我正在尝试创建一个导航栏，其上面有一个标题。我希望它能够让导航栏一旦到达屏幕顶部（我已经自己制定好了），但它上面的任何东西都不会粘住（将正常滚动屏幕）。我正在尝试做的事情的一个很好的例子是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" alt="Atlas Land Office" /> 
</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()); 
} 
} 
);

来源

2013-04-28 Joshua Huff

请使用全部大写避免测试。如果您需要，Stack提供Markdown标签以突出显示粗体文本。 – 2013-04-28 18:03:29

我已更改您的代码有点，它工作正常。在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" alt="Atlas Land Office"></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"); 
     } 
    });

来源

2013-04-28 17:49:40

非常感谢您的帮助！对此，我真的非常感激！我会去检查并比较不同的代码，看看做了什么。 :) – 2013-04-29 02:03:13

标记接受的答案，如果它有帮助 – 2013-04-29 05:22:46

如何在导航栏上方添加标题？

回答

相关问题