Hi, I am currently working on a website using HTML, CSS, and JS. I have encountered a small issue in the HTML section.
Here is the code snippet:
window.onscroll = function() {
changeOnScroll()
};
function changeOnScroll() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}<!DOCTYPE html>
<html>
<head>
<title>Progress bar and nav bar</title>
<style>
h1 {
background-color: cyan;
}
/* The navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
/* Avoiding overlay */
margin-top: 80px;
}
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #f1f1f1;
}
/* The progress container */
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
/* The progress bar */
.progress-bar {
height: 8px;
background: #04AA6D;
width: 0%;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">Gallery</a>
<a href="#contact">About</a>
</div>
</div>
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div class="main">
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
<h1>A progress bar and a menu.</h1>
</div>
</body>
</html>Output:
Upon inspecting the code, it is clear that the progress bar is displayed above the nav bar in the output, even though in the code the nav bar div appears first. I am seeking a solution to have the nav bar appear above the progress bar. Any suggestions on how to achieve this?
I have tried adjusting the positions, but to no avail. Any help would be greatly appreciated.
Thank you!