Scroll progress bar blocked by images?

Design help Animations & Interactions
1

Hi everyone!

I set up a horizontal scroll progress bar at the bottom. I noticed that the progress bar gets blocked by the images when it scrolls past those (example below). Does anyone know how to troubleshoot this?

Screen Shot 2021-05-02 at 10.03.37 PM
Screen Shot 2021-05-02 at 10.03.37 PM1279×440 132 KB

Here is my public share link: Webflow - Danielle's Portfolio

2

Hey @Danielle_Rose,

All you have to do is change the z-index of your progress bar. z-index is a 3D space measure of how above or how below elements you want that particular element to be placed.

For your use case, set the z-index of your div class="Scroll Bar" to 2 or higher and you are good to go.
image

3

Excellent @imtiazraqib that worked perfectly! Thank you so much!