Sticky Lazy Header

I am looking for tips & tricks on how to implement the effect that the sticky nav bar ist hidden while you are scrolling down and shows up once you scroll up.

Example: Auto-Hide Sticky Header demo by Osvaldas Valutis
Is there a way to achieve this effect natively?

Thank you!

You could probably just put a trigger on it and sit it up animate up and hide.

Probably some tinkering you could get it to do the same.

1 Like

Thank you, RickK. A Trigger though would trigger it everytime the elements cross. It works great if we want to fade in the navbar, when e.g. reaching the bottom.

What I am looking for is to have an interaction based on the direction I scroll.

Hi @cuvegas, If your goal is to show and hide the navigation on scroll for mobile devices, just be aware that Webflow disables scroll interactions on mobile devices to preserve best performance. You would need to look for a javascript solution if mobile is your target. Scroll interactions work beautifully in webflow for desktop.

1 Like

Thank you vlogic. Does anybody know how to implement this effect via the custom code?

1 Like

Have a look on this @cuvegas

Hi cuvegas,

Did you ever get this to work. I’ve been trying to make this work as well.
"Nav disappear when user initiates scroll down and appear when user initiate scroll up. No matter where user maybe be on the page.

Thanks.

1 Like