Relume
Log in

Community forum for knowledge and support

Updated 4 months ago

Disappearing and Reappearing Navbar

At a glance

The community member is using a navbar that is currently set to sticky, and they would like it to disappear when the user scrolls down and reappear when they scroll up. They have watched tutorials that suggest setting the position to fixed and using a section for the scroll trigger, but they find this approach to be "clunky". Another community member suggests using a "page scrolled" interaction with "When scrolling up" and "When scrolling down" triggers, and adjusting the navbar's position using a negative top value. The community members also mention a video that explains how to show and hide the navbar on scroll.

Useful resources
WWayne Ergle
·

I'm using navbar6. I'd like it to disappear when the user scrolls down and reappear when they scroll up. It's currently set to sticky.

I've watched some tutorials that say to set the position to fixed and have it appear and disappear when a section (added just for the scroll trigger) scrolls into view. This seems sort of clunky. Is there a better way to do it?

M
W
3 comments
MMatt Johnson

yeah you'll want to use a PAGE interaction called "page scrolled" and there are two triggers - "When scrolling up" and "When scrolling down". I would think that you'd have the navbar set to fixed like you have it and then adjust the position of the navbar if you wanted something similar to say the native mobile chrome/safari tab bars. You would use transform move with a negative top position equal to the height of the navbar - usually something like 5.5rem.

If you need a more solid example, I can whip one up for you - just let me know.

Attachment
image.png
WWayne Ergle

Thanks. Makes sense. I'll give it try. No need for an example.

WWayne Ergle

This video explains how to show and hide the navbar on scroll in case anyone is interested. https://www.youtube.com/watch?v=fU1kl4UAvg8

Add a reply
Sign up and join the conversation on Slack