我一直试图让我的导航栏在滚动时固定在顶部。但它仍然固定在中间答案

【问题标题】：I've been trying to make my NAVBAR fixed to the top when scrolling. But it remains fixed in the middle我一直试图让我的导航栏在滚动时固定在顶部。但它仍然固定在中间
【发布时间】：2019-10-25 09:54:23
【问题描述】：

我一直在尝试让我的导航栏在滚动时固定在顶部。但它仍然固定在初始位置，而不会移动到停止位置并按我的意愿固定。代码如下，

我已经尝试过 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 固定在初始位置，没有移动到顶部。

【问题讨论】：

标签： javascript php html css

【解决方案1】：

您可能需要：

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

在使用fixed 或absolute 定位时，最好指定锚点（top、bottom、left、right）。

【讨论】：

这不是我所期望的确切解决方案。不过还是谢谢！我把logo调整到nav bar下方，这样nav bar的位置就没有问题了。
@Wije 我仍然建议明确指定您想要的位置。但是，如果您不打算这样做，请确保在您定位的所有浏览器中检查它。没有显式定位的固定位置可以behave weirdly in some browsers
谢谢您，我提到了您所说的TOP，并将徽标移至导航栏下方。现在可以正常使用了。