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

[john]

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).

[maddy]

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 });

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

3. Bind the state to your navbar like so:

4. 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:

Builder: Drag and drop page building for any site

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

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

[john]

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!

[holli]

Is it possible to implement this in a symbol? I’ve applied this to a symbol on a collection page however it seems to be conflicting/interfering with the collection: Builder.io: Drag and drop page builder and CMS

[sarah]

Hi @holli, yes you can use this method with a symbol. Can you share more about how it’s interfering?

[holli]

I think maybe I mistook the result I am getting for it being due to the fact that it’s on a collection page… Rather than implementing on a nav, I placed it on a filter menu bar that I want to be sticky at the top of a collection when scrolling. It is revealed when you scroll up however it is still in it’s place at the very top of the screen and not following along with the page. So really I have an issue with the placement of it.