Relume Community Icon
Relume Community
  • 馃彔Home
  • 馃搮Events

  • 馃數Announcements
  • 馃數General
  • 馃數Getting Started
  • 馃數Issues
  • 馃數Showcase

Powered by Tightknit
General
General

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

Avatar of Wayne E.Wayne E.
路

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

  • Avatar of Matt J.
    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.

  • Avatar of Wayne E.
    Wayne E.
    路

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

  • Avatar of Wayne E.
    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