[英]Navigation Bar to Stay on top
我创建了一个不错的导航栏,即使用户正在滚动,我也希望停留在页面顶部。 and included it on the main page. 我为标题创建了一个单独的PHP文件,并将其包含在主页中。
标头菜单的CSS
.headerMenu {
background-image: url(../img/background_white.png);
height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
虽然效果很好,但是当用户滚动时它不会停留在顶部,因此我决定添加一些其他代码:
.headerMenu {
background-image: url(../img/background_white.png);
height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
position: fixed;
top: 0;
}
输入这两个代码后,导航栏将不会显示在页面上。
我试图在网上问一些人,他们都提出了这个position:fixed; top:0;
position:fixed; top:0;
码。 为什么不起作用?
HTML
<div class = "headerMenu">
<div id = "menu">
<a href = "home.php" />What's New</a>
<a href = "home.php" /><?php echo $firstname; ?></a>
<a href = "signout_com.php" />Sign Out</a>
</div>
</div>
尝试这个 :)
.headerMenu {
position:fixed;
top:0;
width:100%;
background-color:#FF0000;
background-image:url(../img/background_white.png);
height:56px;
}
删除填充物,然后删除锚点的自闭合标签:)
另外,请确保将内容放在其下方:),然后在内容元素的顶部添加56px的边距。
我希望这有帮助
CSS没错,但html没错:
演示: http : //jsfiddle.net/lotusgodkk/xpgzP/99/
HTML:
<div class="headerMenu">
<div id="menu"> <a href="home.php">What's New</a>
<a href="home.php">Name</a> <a href="signout_com.php">Sign Out</a> <!--Incorrect closing tags removed-->
</div>
</div>
<div id="content">content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>
</div>
<div id="footer"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.