How to have a navigation that stick when you scroll down

Design help Animations & Interactions
1

How do we do a nav bar that only stick at top when you scroll down? Something like this:
http://www.mvpthemes.com/maxmag/

2

With Webflow, you can do the following.

  • design your navbar and make it a symbol
  • duplicate it, wrap one into a div called “navbar container” and wrap the other into a div called “floating navbar container”. the former is the normal one, the latter is the one which will stick
  • make the latter position:fixed and stuck to the top, make it opactity:zero
  • create an interaction that you put on the former, that will show the latter when scrolled out, and hide it again when scrolled in.

If well done, the result is EXACTLY like your reference.

3

I just did it, make another navbar that I can canll when a certain section is on view. Thanks!

4

Yes. When you want to make an interaction like “When A scrolls out then whos B”, it’s not mandatory, or the best thing, to put the interaction on A. Sometimes it’s better to put it on another element to reach the desired effect. I for one am only using a special Opx height section that I call "trigger’. So all of my triggers are on the root of the HTML, just under body, and called “trigger”. better control, and very much easier to maintain as you never have to look for what element got the interaction.

1 Like
5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.