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

**URL:** <https://forum.builder.io/t/how-do-you-fade-in-out-a-navbar-when-scrolling/51>\
**Category:** CMS\
**Tags:** visual-editor, styling\
**Created:** [April 9, 2020, 12:30am UTC](https://forum.builder.io/t/how-do-you-fade-in-out-a-navbar-when-scrolling/51 "2020-04-09T00:30:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![john](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/john/32/20_2.png) [@john](https://forum.builder.io/u/john)\
**Post date:** [April 9, 2020, 12:30am UTC](https://forum.builder.io/t/how-do-you-fade-in-out-a-navbar-when-scrolling/51/1 "2020-04-09T00:30:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\
**Post date:** [April 10, 2020, 10:06pm UTC](https://forum.builder.io/t/how-do-you-fade-in-out-a-navbar-when-scrolling/51/2 "2020-04-10T22:06:17Z")

</div>

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:

```auto
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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/c74861d7845a59db4eda400e782bcf6e67bf451e.png)

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

![state-toggle](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/c7a27ebd22629c2af1974394bcefc4a56c85ac0d.gif)

1. Bind the state to your navbar like so:

![Screen Shot 2020-04-10 at 3.53.38 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/ef89d9b0c0245094ca8b7419c75dc337407f751f.png)

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

![](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/9065fa0d184ec42d648ee4b44f66c2715c47db24.gif)

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:

![](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/4f4a8f00ef2d758657c0e56a7db6f11483de2d0c.gif)

You can view and edit this example here:

without animation:

> **[Builder: Drag and drop page building for any site](https://builder.io/fiddle/f4d42367c1d84d4b97e1988a867f8b41)**
>
> Builder is the first and only headless CMS with full visual drag and drop editing

with animation: [https://builder.io/fiddle/a5ef0942a0ec46448674d16549023dd2](https://builder.io/fiddle/a5ef0942a0ec46448674d16549023dd2)

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

---

<div class="post-metadata">

**Author:** ![john](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/john/32/20_2.png) [@john](https://forum.builder.io/u/john)\
**Post date:** [April 11, 2020, 11:13pm UTC](https://forum.builder.io/t/how-do-you-fade-in-out-a-navbar-when-scrolling/51/3 "2020-04-11T23:13:47Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![holli](https://avatars.discourse-cdn.com/v4/letter/h/f04885/32.png) [@holli](https://forum.builder.io/u/holli)\
**Post date:** [July 14, 2022, 8:11pm UTC](https://forum.builder.io/t/how-do-you-fade-in-out-a-navbar-when-scrolling/51/4 "2022-07-14T20:11:26Z")

</div>

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](https://builder.io/content/43bff5cf41cc44cb8180a1f4452106ca/edit?activeDesignerTab=3&selectedBlock=builder-f76b6f5d64ec4bdab85c5165524044bc)

---

<div class="post-metadata">

**Author:** ![sarah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/sarah/32/1198_2.png) [@sarah](https://forum.builder.io/u/sarah)\
**Post date:** [July 14, 2022, 10:29pm UTC](https://forum.builder.io/t/how-do-you-fade-in-out-a-navbar-when-scrolling/51/5 "2022-07-14T22:29:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![holli](https://avatars.discourse-cdn.com/v4/letter/h/f04885/32.png) [@holli](https://forum.builder.io/u/holli)\
**Post date:** [July 14, 2022, 10:43pm UTC](https://forum.builder.io/t/how-do-you-fade-in-out-a-navbar-when-scrolling/51/6 "2022-07-14T22:43:00Z")

</div>

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.