How to achieve the floating bar effect of forum.bubble.io

As you can see on forum.bubble.io page:
Lets’ call this bar no. 1: the blue bar (with bubble logo in white)
Lets’ call this bar no. 2: the white bar (with bubble logo in blue and a search icon etc.).

When user scrolls the page down, the bar no. 2 acts like a group until the bar no. 1 is visible, and then changes into a floating group at top of the page.
If this were to be built using bubble, how can we do it ?

Like this:

https://buildingonbubble.com/block/floating-page-header-1458655724896x569257954056077300

Not really. So if you place the floating group relative to top, it will float at that exact same position.
What I’m asking for is for a group to begin floating once it reaches top of the page. i.e. if Y=200 and user scrolls down the group begins to float once user scrolls down 200 pts

That’s a condition then,… when Current Page Scrolling Poisition = 200

2 Likes

A bit like this one …

https://buildingonbubble.com/block/page-header-that-disappears-1458802321275x227848563457523700

You would then need another floating group that starts floating when it reaches the top. You need to be a bit carefull with positioning, as it can “bump” around when it disappears. I think there is a post from Vlad on this.

1 Like

@NigelG… that’s probably the one I meant, But I didn’t see it cos I didn’t realise there was a scroll bar on the home page!

1 Like

Don’t talk to me about scrolling :slight_smile:

1 Like

I’m confused.
I don’t think we can set a condition that a group changes to a floating group once a certain criteria is met. Am I wrong ?

No you have an invisible floating group that’s the same (or not!) as the white group. When you scroll down the page, the condition changes to make the floating group visible. In fact, the “invisble” floating group in the forum is different to the white group, as it also contains the title of the post you are reading.

how to detect floating group scroll position? I have one float set to nothing and second float set to top. i want to show second float only when first float’s scroll position is greater than 105.