Sticking second section to a Header?

Front-end geniuses of Bubble - any idea how to make second section stick to Header like this?

You can do this kind of thing with floating groups and conditionals…

You need two copies of the group in question (or maybe 3 depending on what you’re trying to do).

One of them is a regular group on the page, visible on page load, then set with a conditional (or workflow action) to hide when the page gets to a certain scroll position.

At that same scroll position the floating group will be shown to replace the regular group on the page, and vice-versa when the page is scrolled back up.

How do I decide on a specific Number? Can it be dynamic number like height of the previous group?

If the heights of the page elements above the scroll position on the page where you want the group to stick are static (meaning the scroll position will always be the same), then you can just calculate the scroll position (i.e. assuming you want the group to stick exactly the the bottom of the header, just deduct the height of the header from the top position of the element).

If the heights are variable based on the content (meaning the scroll position will be different depending on the dynamic content) then it’s a bit more tricky, but still fairly straight forward…

You’ll need to use some javascript to get the actual rendered height of the elements in question, then set that value in a custom state somewhere, and use that value as the scroll position to show/hide the floating group.

Here’s a basic demo of the simple version (when there’s no dynamic heights to contend with), so you can get the general idea:

Preview

Editor

Example in the “Preview” is exactly what I’m looking for. If someone has little different design or page structure it might not work out but the logic you shared is the fundamental. Once one knows that the rest can be figured out.

There’s only 1 thing that confuses me. Conditional on Group A says:

  • When current page scrolling position is >= 530
  • The element is not visible

^ Is this what makes it stick to a header or there’s something else that I’m missing?

1 Like

Group A is the group which is on the actual page (the one that scrolls with the page initially).

So the conditional here is what makes that group disappear the moment it reaches the floating header (i.e. when the page scroll position is more than or equal to 530).

At that same point, Floating Group B (which is an identical copy of Group A) appears in its place and sticks to the top of the page (with a top margin of 70 to account for the height of the header) - it has the exact opposite conditional- i.e. when the page scroll position is more than or equal to 530 it IS visible.

1 Like

WOW I’m amazed how seamless it is. Anyway thanks Adam!

2 Likes

Hi Adam! great solution! Can you explain how to do the same thing for variable heights?