在滚动时,我一直试图将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固定在初始位置而没有移动到顶部。
答案 0 :(得分:2)
您可能需要:
.topnav
{
overflow: hidden;
background-color: #80F;
border-radius:0%;
position:fixed;
top: 0;
left: 0;
}
在使用top
或bottom
时指定锚点(left
,right
,fixed
,absolute
)总是一个好主意定位。