# Change position interaction

**URL:** <https://forum.finsweet.com/t/change-position-interaction/531>\
**Category:** General\
**Created:** [May 8, 2023, 6:06pm UTC](https://forum.finsweet.com/t/change-position-interaction/531 "2023-05-08T18:06:50Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![doriana](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/doriana/32/363_2.png) [@doriana](https://forum.finsweet.com/u/doriana)\
**Post date:** [May 8, 2023, 6:06pm UTC](https://forum.finsweet.com/t/change-position-interaction/531/1 "2023-05-08T18:06:50Z")

</div>

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](https://www.mcarchitects.it/il-mondo-mca/valori)

This is my read-only: [Webflow - mcarchitects](https://preview.webflow.com/preview/mcarchitects?utm_medium=preview_link&utm_source=designer&utm_content=mcarchitects&preview=0e477ad0c9641d419d3f76408f6aa7f7&pageId=644bced6cff00c919fc99a1d&workflow=preview)