Forum Academy Marketplace Showcase Pricing Features

How can I get Medium's floating bar style?

Well, on medium’s and post there is a menu bar at the top which gets scrolled down when the user scrolls down the page but it gets back up once the user scrolls up. How can this effect be achieved?

For reference purpose here is a link to one the posts on medium:

Here the green menu bar at the top is not sticky but it appears whenever the user scrolls up the page.

Here’s my initial suggestion:

Create a Custom State (associated with the page). The Custom State should be [Current Page Scroll Position](https://bubble.io/reference#Data.DataSources.PageData.Current Page Scrolling Position).

When the user scrolls, update the custom state to the new Current Page Scroll Position.

Then, for the header bar, set a condition to say that when the Custom State’s value is less than (or within a certain # of pixels of) Current User’s scroll position, the element is visible.

Back of the napkin idea but that may lead you in the right direction. Report back on your findings :slight_smile:

2 Likes

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