Question

在滚动时，我一直试图将NAVBAR固定在顶部。但是它保持固定在初始位置，而无需移动到停止位置并根据需要固定。下面的代码，

我已经尝试过W3 School教程，进行引导和实现。但是似乎没有什么帮助。这是我的不得已。

div.wrapper {
  font-family: Comic Sans MS;
  width: 50%;
  padding-right: 25%;
  padding-left: 25%;
  text-align: justify;
}

.topnav {
  overflow: hidden;
  background-color: #80F;
  border-radius: 0%;
  position: fixed;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #6900c4;
  color: white;
}

.active {
  background-color: #490089;
  color: white;
}

.topnav .icon {
  display: none;
}

<!-- The NAV BAR IS BELOW THE LOGO -->

<!--LOGO-->
<center>
  <a target="_blank" href="https://www.englishessays.online"><img src="img/logoheader.png" alt="Logo" width="65%"></a>
</center>
<br>
<hr class="line" color="black">
<br>

<!--NAV-->

<div class="topnav" id="myTopnav">
  <a href="https://www.englishessays.online">Home</a>
  <a target="_blank" href="https://www.englishessays.online/essays.php" class="active">Essays</a>
  <a target="_blank" href="www.englishessays.online/dialogues.php">Dialogues</a>
  <a target="_blank" href="www.englishessays.online/speeches.php">Speeches</a>
  <a target="_blank" href="www.englishessays.online/stories.php">Stories</a>
  <a target="_blank" href="www.englishessays.online/poems.php">Poems</a>
  <a target="_blank" href="www.englishessays.online/about.php">About</a>
  <a target="_blank" href="www.englishessays.online/contact.php">Contact</a>
</div>

输出应为：滚动时固定在顶部的NAVBAR。错误是：NAVBAR固定在初始位置而没有移动到顶部。

Answer 1

您可能需要：

.topnav 
{
    overflow: hidden;
    background-color: #80F;
    border-radius:0%;
    position:fixed;
    top: 0;
    left: 0;
}

在使用top或bottom时指定锚点（left，right，fixed，absolute）总是一个好主意定位。

我一直在尝试使我的NAVBAR在滚动时固定在顶部。但它仍然固定在中间

1 个答案: