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.


#5

Just so people are aware, here is a better way for this using CSS Sticky position:

:slight_smile:


#6

@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.


#7

@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:

When scrolling into view

  • hide sticky-nav
  • show static nav

When scrolling out of view

  • show sticky-nav
  • hide static-nav


#8

Thanks for sharing, good method!


#9

But you should know that position: sticky doesn’t work in EI (as usual).