Sticky While Scrolling

Hey Guys,

https://preview.webflow.com/preview/luasdesign?utm_source=luasdesign&preview=bf0b11db35eab046cdc43d3aacd1c293

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%.

  1. The Blue bar should be acting like a progress bar while scrolling the different Workflows (like 01, 02 and so on)

  2. 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])

[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link!

Hi,

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?

1 Like

Hi ,

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.

Hope you understand this again correctly. :slight_smile:

Kind regards

Perfect!

I will put a solution together for you.

1 Like

I finally managed to put something together for you. It wasn’t easy but here is the result.
https://luas-design-sticky.webflow.io/

Here is the preview link.
https://preview.webflow.com/preview/luas-design-sticky?utm_source=luas-design-sticky&preview=3afc19ffbd50982ab6231f55e3573439

Have a look a round and feel free to come back with your questions.

1 Like

Hi mrmtta,
thank you very much for taking the time to do this! i appreciate that a lot!

you´ve got exactly the result i wanted to achieve. But for any reason, the preview link is not working for me :/. Could you check this out maybe?

Greetings

I don’t know why that happened. Here it is https://preview.webflow.com/preview/luas-design-sticky?utm_source=luas-design-sticky&preview=c855cbea329bcbf227a2dc8b1dd297de&mode=preview

1 Like