Animation: Hide/Show Navbar on Scroll

[Dorian]

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?

#Webflow Animation: Hide/Show Navbar on Scroll

[Broberto]

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

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

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.

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

[Dorian]

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!

https://vimeo.com/874986730

[aurelie]

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

[Broberto]

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

[Joyce]

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:

Infinite scrolling in WeWeb

[Dorian]

@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

[Broberto]

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

[Dorian]

@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

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:

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

   

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

[Dorian]

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?

[Joyce]

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

[Dorian]

Thanks @Joyce!

[luka]

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

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

3. Watch scroll position on Nav bar section

4. On page scroll workflow

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

[Dorian]

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

[luka]

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

[Dorian]

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!