Progress Bar on Page Scroll
To create a progress bar that tracks the user’s scroll and dynamically fills as they scroll down (and reverses as they scroll up), we can use HTML, CSS, and JavaScript. Below is a step-by-step guide to achieve this:
HTML
First, we need to create a basic structure with a progress bar that sits below the main menu.
HTML1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Scroll Progress Bar</title>
7 <link rel="stylesheet" href="style.css">
8 </head>
9 <body>
10 <!-- Main Menu -->
11 <header>
12 <nav>
13 <ul>
14 <li><a href="#">Home</a></li>
15 <li><a href="#">About</a></li>
16 <li><a href="#">Services</a></li>
17 <li><a href="#">Contact</a></li>
18 </ul>
19 </nav>
20 </header>
21
22 <!-- Progress Bar -->
23 <div id="progressBarContainer">
24 <div id="progressBar"></div>
25 </div>
26
27 <!-- Content -->
28 <section>
29 <h1>Welcome to My Website</h1>
30 <p>Scroll down to see the progress bar in action.</p>
31 <p>... [more content here] ...</p>
32 <p>... [more content here] ...</p>
33 <p>... [more content here] ...</p>
34 </section>
35
36 <script src="script.js"></script>
37 </body>
38
39</html>CSS
Next, we need some styling for the progress bar and the page layout. We’ll make the progress bar positioned at the top, right under the main menu.
CSS1/* Reset */
2* {
3 margin: 0;
4 padding: 0;
5 box-sizing: border-box;
6}
7
8/* Main Menu */
9header {
10 background-color: #333;
11 padding: 10px;
12}
13
14nav ul {
15 display: flex;
16 justify-content: space-around;
17 list-style: none;
18}
19
20nav ul li a {
21 color: white;
22 text-decoration: none;
23 font-size: 18px;
24}
25
26/* Progress Bar */
27#progressBarContainer {
28 position: fixed;
29 top: 50px;
30 /* Adjust this if your menu is larger */
31 left: 0;
32 width: 100%;
33 height: 5px;
34 background-color: #e0e0e0;
35 z-index: 100;
36}
37
38#progressBar {
39 height: 100%;
40 width: 0;
41 background-color: #4caf50;
42 /* Green progress bar */
43}
44
45/* Content */
46section {
47 margin-top: 100px;
48 padding: 20px;
49 font-size: 18px;
50 line-height: 1.5;
51 height: 2000px;
52 /* For demo purposes */
53}JavaScript
Finally, we will use JavaScript to detect how much the user has scrolled and adjust the width of the progress bar accordingly.
JavaScript1// JavaScript for scroll-based progress bar
2window.onscroll = function () { updateProgressBar() };
3
4function updateProgressBar() {
5 var windowScroll = document.documentElement.scrollTop || document.body.scrollTop;
6 var documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
7 var scrolled = (windowScroll / documentHeight) * 100;
8 document.getElementById("progressBar").style.width = scrolled + "%";
9}Explanation of JavaScript
window.onscroll: This event triggers every time the user scrolls.document.documentElement.scrollTop: Retrieves the number of pixels the document is currently scrolled vertically.document.documentElement.scrollHeight: Returns the total height of the document.document.documentElement.clientHeight: Returns the height of the viewport.- We calculate the percentage of the page the user has scrolled by dividing the vertical scroll position by the total document height minus the viewport height. Then, we update the width of the progress bar to reflect this percentage.
Summary...
- When the user scrolls down, the green progress bar will gradually fill based on how far they’ve scrolled down the page.
- As they scroll back up, the progress bar will shrink back proportionally.
This solution gives a smooth, responsive progress bar that tracks user scrolling and is placed just below the main menu.
