Floating group overlaps page footer


I’m trying to create a similar experience to the one on airbnb’s experiences page:

The effect I’m trying to replicate is that of the Map on the right side floating on the page as I scroll down. I’ve achieved that by creating a floating group and adding a map inside, but my problem is that the floating group keeps going after I’ve reached the end of the page, eventually overlapping with the footer.

I’ve been struggling with trying to fix this for the past few hours. Any help will be appreciated!

You can set up a conditional on the floating group to be hidden when the current scroll position is a certain value.

If you know the page height is not going to be dynamic, so it will always be the same, this is easy enough to do. If you don’t have a static page height and it will be dynamic, as I assume yours will be, you can utilize a free plugin to help know when to hide the floating group

Then once the floating group is hidden, you still want the map to be visible…to do that you will need to create another group, with a map that is positioned at the bottom of the page just above the page footer…so that as soon as the floating group is aligned to this other group, the floating group is hidden and the other group is shown.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.