How to add a Scroll Progress Bar in Wix Studio - Wix Studio Tutorial 2024

#wixstudio #wixwebsite #wix #wixtutorialforbeginners

How to add a Scroll Progress Bar in Wix Studio.

About Wix Studio Academy - Wix Studio Academy is a platform dedicated to creating educational and learning videos and articles for Wix Studio. It is not a business or brand, but rather a simple collection of free tutorials, resources, and website templates. The Website, as well as the YouTube channel, are not affiliated to the Wix Studio brand in any way!

[jdawg]

You're amazing thank you! I needed this for my website. Very cool, keep it up!

[DiscoveriesInANewGalaxy]

Thank you, was looking for this! The page you provided is no longer available. That's the code:

<div id="progressBar">
<div id="progress"></div>
</div>

<style>
#progressBar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #ddd;
z-index: 1000;
}

#progress {
height: 100%;
background-color: #4caf50;
width: 0%;
}
</style>

<script>
document.addEventListener('scroll', function() {
const scrollTop = || document.body.scrollTop;
const scrollHeight = -
const scrolled = (scrollTop / scrollHeight) * 100;
= scrolled + '%';
});
</script>