I have a page title at the top of the page, a nav bar under the title and some scrollable content under that. When scrolling down the page, I want the the nav bar to stick to the top when it reaches the top of the page. So when someone scrolls down, the title above the nav bar will be out of view but the nav bar will stay at the top of the page.
You can probably use some custom CSS for this…
But the simple, vanilla Bubble way, to do it it to use two elements… one which will be the ‘scrollable’ navbar, and one which will be the ‘sticky’ navbar (as a floating group)…
Make sure they are identical, then just have the regular nav bar visible on page load (whilst the floating group is hidden), then when the scroll position reaches a certain point, just hide one and show the other…
If you do your calculations right, it will be a seamless transition from the scrolling header to to floating header…
Awesome thanks for the help!
never mind i got it