Streaming live at 10am (PST)

Static to Sticky Nav Demo


#1

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.

Webflow share link


How to create Sticky element on Scroll
#2

Could you share the link again?
I've been looking to nail that one properly for some time...


#3

@Pasint
Hey, sure thing. I had to take down the link before but here's a new one – I've updated the link in the original post above.


#4

Cheers for sharing this! You really helped me out in a pinch.