内容下方的导航栏
当我向下滚动时，正文中的图像显示在导航栏上方。然而，正文中的文本不受影响。所以我的问题是如何阻止这种情况发生。另一件事是如何使橙色“样本女王”标题显示在导航栏下方，因为它现在隐藏在导航栏下方。我希望内容从导航栏下方开始
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="main.css">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-190px";
}
prevScrollpos = currentScrollPos;
}
</script>
<body style="font-family:Century Gothic;">
<div id="navbar" style="background-color:#f1f1f1;padding:15px;text-align: center;">
<img src="/Index Files/insta.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/sample.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/asample.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/amazon.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/sample.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/sampleos.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
</div>
<h1><font color="orange">sample Queen</font>
</h1>
<h2>sample Queen is a small soap businets </h2>
</head>
慕盖茨44945811回答
-
30秒到达战场
请将以下行添加到您的 CSS 中。#navbar{z-index: 1000;}body{padding-top: 200px;}您可以根据导航栏的高度控制 padding-top 值。
随时随地看视频慕课网APP
相关分类
Html5