I was playing around recently with this style nav where it starts below a hero portion at first and then becomes sticky once it reaches the top of the browser. I’m pretty pleased with the result and it’s all done in Webflow without custom code AND using only one navbar.
How it’s made:
1 navbar (symbol)
2 different wrappers for the symbol (1 static, 1 fixed)
Initial View interaction on the fixed wrapper to hide it on load
1 interaction on the hero div with 2 scroll triggers
Trick is to use interactions with 0 transition time.
Here’s the share link for anyone who wants to take a peak under the hood.
@GenKazak Thanks for sharing the demo.
I followed your tips and was able to make the fixed nav bar appear when I scroll down the page. However, I think I’m missing one scroll trigger and I can’t make the fixed header disappear when I scroll up the page and ended up with two nav bars on top. Could you share some insight on how to resolve this?
Thanks.
@bctpesf
The link that Nelson posted for using position: sticky is a good alternative solution for this – I would check caniuse for browser support and limitations. https://caniuse.com/#search=sticky
As for this demo, it was made using Interactions 1.0 but I’m sure you can make it the same with Interactions 2.
The .sticky-demo-hero div gets the scroll interactions:
