I have some code. It only shows how much you scrolled in the navbar, not how much you scrolled in the actual webpage.
I think its the problem with the javascript code. When I tried changing it to document instead of nav, errors came on the console.
const nav = document.querySelector('nav');
const progress = () => {
let scroll = nav.scrollTop;
let height = nav.scrollHeight - nav.clientHeight;
let scrollProgress = (scroll / height) * 100;
document.getElementById("scroll-progress").style.width = scrollProgress + "%";
}
nav.addEventListener('scroll', progress); nav {
justify-content: center;
width: 100%;
font-weight: 900;
color: white;
background-color: black;
z-index: 50;
height: 100px;
overflow: auto;
}
.nav-items {
display: flex;
justify-content: center;
align-items: center;
}
.nav-sec, .section-navigate {
display: flex;
padding: 0px;
list-style-type: none;
justify-content: center;
align-items: center;
margin: 0px;
}
.navigate {
cursor: pointer;
}
.section-navigate {
display: flex;
justify-content: center;
align-items: center;
margin: 0px;
flex-wrap: wrap;
}
.link {
width: 300px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.scroll {
width: 100%;
height: 4px;
background-color: lightgray;
}
#scroll-progress {
width: 0%;
height: 4px;
background-color: green;
}Hello, I have edited your code to make it so it will show the scroll of the navigation bar. If you need anything, please ask me. DONT FORGET TO MARK THIS ANSWER CORRECT!
<header>
<section class="close">
<div class="sec-contain">
<h1 class="sec-head">
FIRST THINGS FIRST
</h1>
<p class="sec-text">
Lorem ipsum
</p>
<p class="sec-text">
Vivamus dictum aliquam posuere.
</p>
<p class="sec-text">
Vestibulum iaculis ligula
</p>
</div>
</section>
</header>
<nav class="nav" id="navigation">
<div class="nav-items">
<ul class="nav-sec">
<li class="current-sec">
<p class="current" id="text">
First Thing's First
</p>
</li>
<li class="navigate">
<ul id="btn" class="nav-list">Take Me To</ul>
</li>
</ul>
</div>
<div class="modal" id="jump-links">
<div class="close" id="close-btn">×</div>
<ul class="section-navigate">
<li class="link close"><a href="#one">First Things Second</a></li>
<li class="link close"><a href="#two">First Second Third Things Third</a></li>
<li class="link close"><a href="#three">Seven</a></li>
<li class="link close"><a href="#four">Last Things First</a></li>
</ul>
</div>
</nav>
<div class="scroll">
<div class="scroll-bar" id="scroll-progress"></div>
</div>
<main>
<div class="anchor" id="one"></div>
<section class="close" id="one-txt">
<div class="sec-contain">
<h1 class="sec-head">
FIRST THINGS SECOND
</h1>
<p class="sec-text">
Lorem ipsum dolor sit amet
</p>
<p class="sec-text">
Lorem ipsum dolor si
</p>
</div>
<div class="anchor" id="two"></div>
</section>
<section class="close">
<div class="sec-contain">
<h1 class="sec-head">
FIRST SECOND THIRD THINGS THIRD
</h1>
<p class="sec-text">
Lorem ipsum dolor sit amet,
</p>
<p class="sec-text">
Ut imperdiet tortor eget
</p>
<p class="sec-text">
Donec finibus augue
</p>
<p class="sec-text">
Donec in suscipit
</p>
</div>
<div class="anchor" id="three"></div>
</section>
<section class="close">
<div class="sec-contain">
<h1 class="sec-head">
SEVEN
</h1>
<p class="sec-text">
sevensevensevensevensevensevenseven
</p>
</div>
<div class="anchor" id="four"></div>
</section>
<section class="close">
<div class="sec-contain">
<h1 class="sec-head">
LAST THINGS FIRST
</h1>
<p class="sec-text">
Lorem ipsum dolor sit amet
</p>
<p class="sec-text">
Duis sed felis ac iis feugiat elit. Duis tempus feugiat risus ut placerat. Cras sit amet ligula urna.
</p>
<p class="sec-text">
Cras eu mattis odio.
</p>
<p class="sec-text">
Ut cursus sit
</p>
</div>
</section>
</main>
<section id="end-stick" class="close">
<div class="sec-contain">
<h1 class="sec-head">
SECOND THINGS LAST
</h1>
<p class="sec-text">
Lorem ipsum dolor sit amet,
</p>
<p class="sec-text">
Class aptent taciti socios
</p>
<p class="sec-text">
Praesent nec sollicitudin nibh
</p>
</div>
</section>Please help me fix the problem. THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG . IM DOING THIS BECAUSE STACKOVERFLOW SAID THAT MY POST IS MOSTLY CODE AND I SHOULD ADD SOME DETAILS LOL