How to use progression bar on top of the screen

Technical
1

I see this progression bar at the top of their funnel which moves when scrolling down.

Can you help me with the code?

1 Like
2

Hey @Yellow_Com :waving_hand:

Yes! You can totally add a progress bar that moves as the user scrolls — and the good news is, it only takes a bit of HTML, CSS, and JavaScript.

Here’s how you can do it:

:white_check_mark: Step 1: Add this in Custom Code > HTML Block (anywhere on the page):

<div id="scroll-progress"></div>

:white_check_mark: Step 2: Add this in Custom Code > CSS:

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  background: #00C49A;
  width: 0%;
  z-index: 9999;
}

:white_check_mark: Step 3: Add this in Custom Code > Body HTML:

<script>
  window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const progress = (scrollTop / docHeight) * 100;
    document.getElementById('scroll-progress').style.width = progress + '%';
  });
</script>

:tada: That’s it! Now your funnel will show a clean scroll progress bar at the top.

Let me know if you want to customize colors or thickness! :blush: