Home App Docs Github

How do you fade in / out a navbar when scrolling?

I have a navbar pinned to the top of a page. When scrolling down (at any point on the page) I’m trying to make the navbar fade up out of view. When scrolling up (at any point on the page) I’m trying to make the navbar fade back down into view.

(Similar to how the bottom toolbar fades in and out of view at the bottom of mobile web browsers on iOS).

Hi, John! Thanks for the question.

You can make the navbar fade up on scroll with some custom code.

  1. Add this code to the “custom JS/CSS” section:
let lastScrollPosition = 0;
document.addEventListener('scroll',function(e) {
  if (window.scrollY > lastScrollPosition) {
    state.showNav = false;
  } else {
    state.showNav = true;
  }
  lastScrollPosition = window.scrollY;
}, { passive: true });

Screen Shot 2020-04-10 at 6.16.47 PM

  1. You should now see the state being toggled on and off when you scroll.

state-toggle

  1. Bind the state to your navbar like so:

Screen Shot 2020-04-10 at 3.53.38 PM

  1. Now, your navbar should disappear when you scroll down and reappear when you scroll up.

Lastly, if you would like the navbar to fade out instead of instantly hiding you can:

  1. Remove the current “show” binding

  2. Add style.opacity from state.showNav ? 1 : 0 and style.top from state.showNav ? 0 : '-100px'.

  3. Now, add a transition to your navbar: opacity .5s, top 1s & transition-timing-function: ease-out. The navbar should now look like this:

You can view and edit this example here:

without animation:

with animation: https://builder.io/fiddle/a5ef0942a0ec46448674d16549023dd2

I hope this was helpful! If you have any questions, let us know.

Thank you this was enormously helpful, especially with the fiddle. There were a few implementation nuances I had questions about, but the fiddle answered all of them!

1 Like