In The last Section, i want the H3-Headings “Analyse” and Ideenfindung" to be Sticky and changing colors, while scrolling the blue bar at each 50%.
The Blue bar should be acting like a progress bar while scrolling the different Workflows (like 01, 02 and so on)
At the point, where the blue progress-bar starts, the 01-Workflow H3 (Analyse) should change color and size. At the point where the blue bar reached out to where the 1. Workflow-Box ends (01), the color and the size of the second Worklow (02) should change until the 3rd Workflow-Box will start the same process.
Hope you understand this. Very complicated to explain, what i mean.
kind regards
Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])
let me see if I understood the functionality your are looking for:
The user starts scrolling at the top of the page
When arrives to the last section, everything remains static but the blue bar, that progresses from left all the way to the right.
At the same time the blue bar progress, each time it gets to a new Workflow element, the color and size of the corresponding heading should change.
Once the blue bar reaches the right, there is no more scrolling as the page is over.
Please let me know if I understood it correctly.
Is your intention for the workflow elements to scroll horizontally as the blue bar progresses? Is there any example you’ve seen somewhere else you are using to develop this functionality? This might help to better understand the desire outcome.
In your design I can’t see a third element. How many workflow elements are you planning to have?
yes, you understood it exactly right. The blue bar should be in a synchronic flow with each workflow element.
So for example, the 1. workflow element starts and changing color and size of the heading at the same time, when the blue bar is on 0% . Then , when you are on to 50% of the blue bar, it should switch to the next (2.) workflow element, and do the same again with the color and size of the heading, until 100% is reached.
The heading should change color and size at the same point, the progressbar is on 50%. Then it should stay like this, untill the next workflow element begins. But at the same time, the heading of the Element BEFORE the current one, should back up to normal state. Its like you would switch the focus on the current element, and all other elements are in normal state.
](https://university.webflow.com/article/sharing-your-sites-read-only-link!!%5BHowtoSetThisUp%7C690x472%5D(upload://vaXpfLjjoV39bDAGjk5CPvn5ODr.png)){kind=link}