Current Scroll Position but for Floating Groups


If you’re building an SPA, and if you want it to feel as native as possible, your “page” must be a floating group.

This ensures that when users go from home page to profile page, the scroll position they were at in the home page, remains. That’s a gold nugget for you.

The downside to this however, is that I can no longer use the “page scroll position” expression as technically my page is not scrolling, only my floating group is.

So my question to you all: Say I want to put a floating group header on top of my floating group page, and say I want to color this header only when the user has scrolled >15% of the floating group, how would I do this?

For a real world example of this, look at the Twitter or Instagram Profile Pages.

A Golden nugget from Perfect… hmmm It seems like overly complicating a lot of things and asking for lots of headaches. You can show the floating group header based on visibility or other elements / triggers as the page scrolls.

Trust me, if I could change “perfect” I would.

I’m not entirely sure if I follow your reasoning. Let’s say you have an app like instagram.

If this is an SPA, and your groups are acting like pages, switching from page to page will inevitably cause your user to lose their scroll position every time.

If I was halfway down the explore page, but then wanted to check my profile, by the time I get back to the explore page, my scroll will be wildly off.

Using Floating Groups instead of regular groups, solves this issue, with little to no drawbacks besides the title of this post.

As long as you make sure to “bring to front” your floating headers that are supposed to float over your floating pages, you’ll be golden.

Until bubble allows groups to remember their position somehow, I honestly cannot think of a better solution.