Question

我试图阻止我的Navbar滚动页面的其余部分。

html代码的相关部分是：

     <body>
                    <?php include("includes/navbar.php"); ?>

                    <div class="container">
                        <div class="placeholder">
                        <img class="img1" src="images/logo.gif" alt="BCIC Logo">
<h1>Text Here</h1> 
    <p>More paragraphs here</p>
                        </div>
                    </div>
            <script>
            function myFunction() {
                var x = document.getElementById("myTopnav");
                if (x.className === "topnav") {
                    x.className += " responsive";
                } else {
                    x.className = "topnav";
                }
            }
            </script>
        </body>

navbar.php的HTML代码：

<div class="topnav" id="myTopnav">
    <!-- show menu icon on small screen-->
      <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
        <?php
        if ($page == 6){
        echo '<a href="contact.php" class="active">Contact us</a>';
      }
      else{
      echo '<a href="contact.php">Contact</a>';
      }
          if ($page == 5){
        echo '<a href="join.php" class="active">Get Involved</a>';
      }
      else{
      echo '<a href="join.php">Get Involved</a>';
      }
        if ($page == 4){
        echo '<a href="forms.php" class="active">Forms</a>';
      }
      else{
      echo ' <a href="forms.php">Forms</a>';
      }
      if ($page == 3){
        echo '<a href="documents.php" class="active">Documents</a>';
      }
      else{
      echo ' <a href="documents.php">Documents</a>';
      }
       if ($page == 2){
        echo ' <a href="about.php" class="active">About</a>';
      }
      else{
      echo ' <a href="about.php">About</a>';
      }
       if ($page == 1){
            echo ' <a href="index.php" class="active">Home</a>';
      }
      else{
      echo ' <a href="index.php">Home</a>';
      }
      ?>
 </div>

CSS是：

    .container{
        /* Main content */
         width: 100%;
        margin-top: 5px; /* Add a top margin to avoid content overlay */
    }
    .placeholder{
        display: block;
        width: 100%;
        padding: 20px 0px;
        background-color: #846da2;
        text-align: center;
        }

        .topnav {
           background-color: #ffffff;
           opacity: 0.8;
            overflow: hidden;
              }
        .topnav a {
            float: right;
            display: block;
            color: #846da2;
            text-align: center;
            padding: 14px 16px 10px 16px;
            text-decoration: none;
            font-weight: bold;
            font-size: 11pt;
           }
        .topnav a:hover {
            border-width: 0px 0px 3px 0px;
            border-style: solid;
            border-color: #846da2;
            background-color: #d4c0ed;
            color: #9754ef;
        }
.active {
    border-width: 0px 0px 3px 0px;
    border-style: solid;
    border-color: #846da2;
     background: url('transparent.png');
    color: #000000;
 }

所有这些都将Navbar放在页面的右上角和占位符div上方，但它会向上滚动显示页面的其余部分。

经过大量的搜索和实验后，似乎应该将CSS更改为：

    .topnav {
       background-color: #ffffff;
       opacity: 0.8;
        overflow: hidden;
        position: fixed;
        z-index: 20;
}

但这不能正常工作。发生了三件事，其中两件是错误的。导航栏变得固定（正确），但它移动到页面的左上角（错误）并向下移动到占位符div（错误）。

我在CSS中尝试了很多组合但是无法让导航栏保持固定并位于占位符div上方页面的右上角。

我完全难过，花了好几个小时试图做到这一点。有人可以帮忙吗？

祝福

火车

Answer 1

如果您希望导航栏位于右侧，只需添加：

.topnav {
   right: 0;
}

由于你的位置是固定的，你可以添加top，left，right，bottom来改变元素的位置。

我还想补充一下：

.topnav {
    top: 0;
    width: 100%;
}

让它看起来更漂亮。

为了将它放在页面的最顶部，在div上，更改：

.container{
   margin-top: 50px;
}

在这里，您可以找到有效的codepen。

希望这能解决你所有的问题。

当使用位置时，Navbar不会停留在原位：固定;

1 个答案: