# Animation: Hide/Show Navbar on Scroll

**URL:** <https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933>\
**Category:** Ask us anything\
**Created:** [October 16, 2023, 7:39pm UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933 "2023-10-16T19:39:35Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [October 16, 2023, 7:39pm UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/1 "2023-10-16T19:39:35Z")

</div>

How can I recreate this in WeWeb please? As far as I can tell, WeWeb doesn’t have an ‘on scroll’ workflow trigger like WebFlow, right?

[![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/3d9acc4a08c8a20d201942c3c9fef35450e162ea.jpeg "#Webflow Animation: Hide/Show Navbar on Scroll") ](https://www.youtube.com/watch?v=T2JyhaeH15k)

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 16, 2023, 10:07pm UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/2 "2023-10-16T22:07:44Z")

</div>

It requires some custom JS, I mean, there is a **Watch Scroll Position** option that I yet have to understand as it seems there is no Docs for it currently. Might be doable with that one too in nocode, if I only knew how it works.

Anyway, how I did it.

1. Setup your div with the following

![Screenshot 2023-10-17 at 00.04.37](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/3c436935ed52f4c8da4f64523e07283e8713a160.png)

 ![Screenshot 2023-10-17 at 00.04.08](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/51d1a91bf7337d1d4531ce9c7c5961210cd8c182.png)

1. Add a custom workflow with this javascript code on page load (or just into the custom code - will reflect only in the published version)

```auto
var prevScrollpos = wwLib.getFrontWindow().pageYOffset;
wwLib.getFrontWindow().onscroll = function() {
  var currentScrollPos = wwLib.getFrontWindow().pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    wwLib.getFrontDocument().getElementById("navbar").parentNode.style.top = "0px";
  } else {
    wwLib.getFrontDocument().getElementById("navbar").parentNode.style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

```

the **-50px** is how far the navbar will go up, in my case my navbar is 50px so -50 hides it perfectly.

1. Enjoy.

_Edit: You might need to go to preview mode to see it working for some reason (might be something with iframe and scroll detection)_

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [October 16, 2023, 11:39pm UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/3 "2023-10-16T23:39:17Z")

</div>

Worked perfectly, thanks @Broberto! I also put this little Custom CSS on the nav bar element and now it comes in and out smoothly! Nice one, thanks!

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/454d09e9649c0da6556fc6ee920fbe64e916b4fd.png)

[https://vimeo.com/874986730](https://vimeo.com/874986730)

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [October 17, 2023, 10:51am UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/4 "2023-10-17T10:51:37Z")

</div>

The scroll feature is coming with the animation feature, and is currently in beta. This is why it is not documented yet, but available for testing for some people 🙂

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 17, 2023, 10:52am UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/5 "2023-10-17T10:52:39Z")

</div>

I’ll be eagerly waiting to understand what it does haha!

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [November 2, 2023, 11:56am UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/6 "2023-11-02T11:56:35Z")

</div>

Hey there 👋

Nicely done!

In case you want to switch to no-code later on or need it for another use case, here’s a video tutorial on how to use the “on page scroll” workflow trigger:

[![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/56c36f075099c0dfb25dc10a836469a1931a4bc6.jpeg "Infinite scrolling in WeWeb") ](https://www.youtube.com/watch?v=f7lM-yqWJqY)

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [November 13, 2023, 6:37pm UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/7 "2023-11-13T18:37:56Z")

</div>

@Broberto Something has changed which is causing this code to interfere with the page scroll position upon page load. It’s not loading at the top; looks like it might be loading about the height of my nav bar (80px in my case).

What’s confusing is that I am using this exact same code on other pages and they load fine. The difference is that the page with the problem has another fairly heavy workflow on page load. I’ve tried adding your code into that workflow in various positions but doesn’t fix the issue. Any thoughts please?

Thanks!

> **[iCloud.com](https://www.icloud.com/photos/#034gR20haNnMvwce-p3IOu3_Q)**
>
> Sign in to iCloud to access your photos, videos, documents, notes, contacts, and more. Use your Apple ID or create a new account to start using Apple services.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d69db5047567599ac664303d4eb2dfdad882c8c2.png)

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/37d36ee6fedecb8c811ab0dd1365e867d6ab2f7c.png)

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/14bae55372a861993010eeb66ddfdbbd7caabaf3.png)

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [November 13, 2023, 7:15pm UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/8 "2023-11-13T19:15:18Z")

</div>

I’d suggest using what @Joyce sent. Might be the update interfering with this also

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [November 14, 2023, 4:22pm UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/9 "2023-11-14T16:22:51Z")

</div>

@Broberto, @Joyce I attempted to recreate this in no-code. It is working perfectly in iOS Safari browser, but behaves differently in iOS Chrome browser for some reason that I cannot determine. As you can see in the below-linked screen recording, in Chrome the nav bar is briefly present but then slides up and out of sight on page load - not the desired behavior. Any ideas why please?

[Screen recording](https://share.icloud.com/photos/0fcrvkpagsyU0miq5U2fsi1ww)

The way I have this configured in WeWeb is:

1. A variable that controls the Top position of the nav bar element, which is set to True by default:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/ea4b7fbdc82785db2a782ae8f673a67f18952010.png)

1. The nav bar element’s Top position controlled by this variable:  

2. This trigger workflow on the page controls the state of the variable:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e852eb4ca90d767b9e78864d571694654f97fc20.png)

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [November 15, 2023, 3:21pm UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/10 "2023-11-15T15:21:37Z")

</div>

Update: I tried another phone (iPhone 13 as opposed to iPhone 15) and got a different result! On the iPhone 13, both Chrome and Safari exhibit the same, unwanted behavior - the top nav bar appears briefly then hides itself on page load. I should add that everything works fine in the editor in preview mode. Help! @Joyce any thoughts please?

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [November 15, 2023, 3:32pm UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/11 "2023-11-15T15:32:01Z")

</div>

No idea. Let me ask someone from the tech team to look into this for you.

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [November 15, 2023, 3:42pm UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/12 "2023-11-15T15:42:07Z")

</div>

Thanks @Joyce!

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [November 15, 2023, 4:38pm UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/13 "2023-11-15T16:38:22Z")

</div>

Here is how I’ve done it, tested and works on:

- Desktop Chrome
- iOS Safari
- iOS Chrome

1. Two variables, `show-navbar` for controlling whether nav is shown and `scrollPos` which holds previous scroll position

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/6c9ea391e0c45460f679a8c8844392e2e0b2bc10.png)

1. Nav section set to Position: Normal, and ‘container’ set to Position: Fixed with Top binded to the screen below:

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2678b98af107b0a1f90d19ea89cc89a6d6ed00f9.png)  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/af00806be48e2c3bf284cd53299e01e2030f9b5c.png)

1. Watch scroll position on Nav bar section

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/45fd76217e0191dfc9be4e6bb9d5ccb0b3c6c75c.png)

1. On page scroll workflow

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d6f5c8ce3b39f5b784fcfa4c1c0a28945c233762.png)

**Note: As you can see I have additional condition that makes the navbar visible if the y is in the first 200px of the screen. This should eliminate loading changes**

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9ba323315598591c9901696e1314d5807248a923.png)

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [November 16, 2023, 3:32am UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/14 "2023-11-16T03:32:36Z")

</div>

Thanks @luka. Why do you need the ‘watch scroll position’ turned on? Where is that referenced in the workflow or the Top display rule?

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [November 16, 2023, 8:25am UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/15 "2023-11-16T08:25:34Z")

</div>

It’s where I got Position of nav - y variable from

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [November 17, 2023, 5:29pm UTC](https://community.weweb.io/t/animation-hide-show-navbar-on-scroll/4933/16 "2023-11-17T17:29:09Z")

</div>

Ah ok thanks @luka. I am just using the screen.scroll.y property.

I simplified my workflow to match yours and I added in a similar condition to make it visible if y is in the first 40 pixels and its now working perfectly on all platforms. Thanks!

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7ca63ef440b702667bdcf8d0ec154a3f049c395f.png)