Improving Navbar Behavior: Hide on Scroll Down, Show on Scroll Up

·

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?

3 comments

· Sorted by Oldest

Matt J.
·
Wayne E. 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.
Wayne E.
·
Thanks. Makes sense. I'll give it try. No need for an example.
Wayne E.
·
This video explains how to show and hide the navbar on scroll in case anyone is interested. https://www.youtube.com/watch?v=fU1kl4UAvg8
👌1

Matt J.
·
Wayne E. 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.
Wayne E.
·
Thanks. Makes sense. I'll give it try. No need for an example.
Wayne E.
·
This video explains how to show and hide the navbar on scroll in case anyone is interested. https://www.youtube.com/watch?v=fU1kl4UAvg8
👌1