Change position interaction

Hello guys!

I hope you are all well!

I’ve been stuck on a hero section for weeks.

I’m working on a project where I have to recreate a site, previously developed on Wordpress.

In practice, this hero section has 3 main elements:

-Image

  • H1
  • Paragraph.

Both the image and the H1 initially have a fixed position.

Then, when the user scrolls and the paragraph “reach” the H1, the H1 goes from a fixed to an absolute position.

When both elements, the H1, and paragraph, go out of view the image changes from a fixed to a relative position.

I’ve tried implementing the class adder where I add and remove the position-absolute and position-relative classes with no luck. Could anyone help me with this?

Here is the link to one of the pages that have the interaction https://www.mcarchitects.it/il-mondo-mca/valori

This is my read-only: Webflow - mcarchitects