Floating Group - stick on scroll?

Need help
1

Hi all,

I’m not sure I know the best way to achieve the following behavior. Any ideas?

I have a page that consists of a huge group. There’s a button I’d like to have just under the hero image (sign up for a lesson with X). Then, when that button reaches the top of the screen I’d like it to stick there.

When the page is scrolled back up to the button’s original position I’d like it to return to a normal element on the page (meaning, no longer sticking and blocking the hero image and main menu bar).

“Normal view”

59%20AM
59%20AM3330×1736 1.02 MB

Rest of page view with sticky button:

19%20AM
19%20AM2366×1740 503 KB

Basically, I’m trying to create a really clear CTA on a long page.

Ideas to make this work?

Thanks!
Jen

2

Hi Jen :slight_smile: I’m on mobile now but you can achieve this by creating a separate floating header (set to float:top) with a copy of the button. Set this to not be visible on page load, and a conditional only to become visible once the scroll position is greater than or equal to the position on the page where the on-page button is at the top (looks like it’s around 650?). That should work!

2 Likes
3

Thanks, Faye!

It worked!

1 Like
4

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