Question

我创建了一个很棒的导航栏，即使用户正在滚动，我也希望保持在页面顶部。我为名为 header.php 的标题创建了一个单独的PHP文件，并将其包含在主页面上。

headermenu的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;代码。为什么它不起作用？

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>

Answer 1

试试这个：）

.headerMenu {
    position:fixed;
    top:0;
    width:100%;
    background-color:#FF0000;
    background-image:url(../img/background_white.png);
    height:56px;
}

删除填充，然后删除锚点的自闭标记：）

还要确保将内容放在其下面:)然后在内容元素的顶部添加56px的边距。

我希望这会有所帮助

Answer 2

在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>

导航栏保持领先

2 个答案: