I am in the process of developing an e-learning platform and I would like to include a scrolling indicator that visually represents the progress of pages read. The website consists of four HTML pages, with each page corresponding to 25% of the scroll bar. Ideally, when all four pages have been scrolled through, the indicator should reach 100%. I have attempted to implement the following code which successfully allocates 25% for one HTML page. However, when I scroll back up, the percentage decreases again. What I really want is for the indicator to stay at 25% once the page has been fully scrolled. Despite my efforts as a programming beginner and numerous searches on Google, I have not been able to find a solution. Any help would be greatly appreciated.
One possibility I considered was using an if-else statement, so I experimented with variations by adjusting variables, numbers, and their order but nothing seemed to work:
if (scrolled === 25) {document.getElementById("myBar-fotografie").style.width = 25 + "%"; }
else {document.getElementById("myBar-fotografie").style.width = scrolled
+ "%";}
So far, I have only focused on maintaining the indicator at 25% after full scrolling of a single page, without incorporating the percentages from all four HTML pages. Figuring out how to combine them is currently beyond my knowledge level.
<html>
<p> Fotografie </p>
<div class="progress-container">
<div class="progress-bar" id="myBar-fotografie"></div>
</div>
// "Fotografie" signifies the headline for the four subpages
</html>
<style>
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
}
</style>
<script>
// Addition of a script that triggers function when user scrolls
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop ||
document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight -
document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 25;
document.getElementById("myBar-fotografie").style.width = scrolled + "%";
}
</script>