Forum Academy Marketplace Showcase Pricing Features

How to make current page position 'talk to' progress bar

I was a progress bar to move forward 20% when the user scrolls to the next question (5 question in total). The SimpleProgressBar works when I add a workflow to the ‘Next question’ button, this moves the progress on 20%, but if the user scrolls back, the progress doesn’t update.

So, to fix this, I want the SimpleProgressBar to display according to the Current page Scrolling Position.

My set up shown below:

I am trying to tell Bubble that when the Current page Scrolling Positionis Step2, then increase the progress bar by 20% but I can’t see how to refer to the progress bar?

I wouldn’t attempt it on scrolling position as on mobile the position will be different than on desktop because of the dynamic aspect of the element and page height.

Instead, I’d setup using the actually container groups you have on the page that represent the different questions you have. I think you could use the “elements in view” plugin to make this even easier as each question container group can have an elements in view element at the top of it (x=0. y=0) and setup the conditionals on the progress bar to look at if the elements in view plugin element is in view or not. Just make sure you have things spaced out far enough that no two elements in view plugin elements are seen at the same time.

You may also reconsider the approach all together and just hide/show the container groups not by scrolling but by pressing a button to continue to next question or go back to previous question and just hide/show the container groups that way.

Very good point regards the issues with scrolling position on mobile view. Your solution seems spot on, but I have just tried and can’t get it to work?

I’ve dropped in an “elements in view” and set a condition on the progress bar that when that “elements in view” is viewable, the percent should be 20%. But what’s happening is the percent remains stuck at 20%, regardless of if I drop in more “elements in view” ?

The issue I am having is that a simple button allows me to set Element and Custom states, so I can then just say "when this button is clicked, make the progressBar 30%. However, the “elements in view” (or the Current page Scrolling Position) elements don’t allow me to do this.