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

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;
}

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