Streaming live at 10am (PST)

Sticky Lazy Header


#1

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: http://osvaldas.info/examples/auto-hide-sticky-header/
Is there a way to achieve this effect natively?

Thank you!


Appear nabber on scroll up and disappear on scroll down
#2

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

http://tutorials.webflow.com/nav-appears-on-scroll

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


#3

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.


#4

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.


#5

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


#6

Have a look on this @cuvegas

https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c


#7

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.


#8