我试图阻止我的导航栏与页面的其余部分一起滚动。
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()">☰</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;
}
所有这些都将导航栏放在页面的右上角和占位符 div 的上方，但它会与页面的其余部分一起向上滚动。
经过大量搜索和实验，CSS 似乎应该更改为:
.topnav {
background-color: #ffffff;
opacity: 0.8;
overflow: hidden;
position: fixed;
z-index: 20;
}
但这不能正常工作。发生了三件事，其中两件是错误的导航栏固定(正确)，但它移动到页面的左上角(错误)并在占位符 div 内向下移动(错误)。
我在 CSS 中尝试了很多组合，但无法让导航栏保持固定并位于占位符 div 上方页面的右上角。
我完全被难住了，花了几个小时试图解决这个问题。有人可以帮忙吗？
祝福
图
最佳答案
如果你想让导航栏在右边，只需添加:
.topnav {
right: 0;
}
因为你有 position: fixed，你可以添加 top,left,right,bottom 来改变元素的定位。
我还要补充:
.topnav {
top: 0;
width: 100%;
}
让它看起来更漂亮。
为了将它放在页面的最顶部，在 div 之上，更改:
.container{
margin-top: 50px;
}
在这里你可以找到一个有效的 codepen .
希望这能解决您所有的问题。
关于html - 使用位置 : fixed; 时导航栏不在原地，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48973540/