Fixing a floating group once it's scrolled

I currently have a group on the right-hand side of my page.

I’d like the group to become fixed only once a user scrolls past it.

When I create a floating group, the element is automatically fixed from where it begins on a page.

Would appreciate any help.

Hey there,

Unfortunately using the Floating Group element to accomplish this is quite tricky and requires a few conditions and duplication of the element/s you want to float.

Essentially what you’ll need to do is have a standard group on the right, that shows when the current page scrolling position is < 300 but hides when greater than that value. Then you’ll need a floating group, probably set floating relative to position to both and drag that to the full height of the page, then add your elements inside and use the reverse of the scroll position condition.
To avoid repeating designing & creating elements, you could make the elements that sit in the sidebar reusable, then its a matter of adding both into the group and floating group containers.

Example:
image

Unfortunately on the Floating Group, the conditions can not be dynamically set to change the floating relative position, otherwise might have more flexibility.

You’ll also need to check, responsively, it hides and doesnt clash with the main content.

If this sounds too fiddly, which it is to be honest, I suggest taking a look at this plugin by @gaurav which should do the trick nicely.

3 Likes

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