Hello! I love the navigation bar that https://diagram.com/ has where a secondary navigation bar appears from the top of the viewport when the “magic wand” element is scrolled into view:
hi @Tak WF UI doesn’t offer this functionality you should use custom javaScript code. You are looking for intersection observer that is part of Web API.
There are many articles and videos to learn from “how to”, you can also find some WF examples.
@Tak & @Stan it is actually possible with just a little trick.
What you have done is exactly what you need to do but try it applying to the hero section which is the top one or let’s say when the main navbar appears.
And for the interaction, first select the Secondary Navbar [Slide Up] for When scrolled into view and select Secondary Navbar [Slide Down] for When scrolled out of view
This way when you reach top you won’t go beyond that so the secondary menu will be hidden and when you scroll down your secondary menu will appear through the whole page after you cross the hero section.
Best option would be with the custom JS or GSAP but this trick works well and without any extra hassle.
So please try and let me know what you think.
And @Stan sorry to contradict you here but let me know if there is anything I’m missing here.
no worry @abirana, I was convinced that this fx (WF intersection Observer version) can be used only on element it self means not be able interact with other elements based on state of other element as I’m lately not using WF intensively. If it is possible that good.
This effect is actually very simple to achieve in Webflow.
Here is how:
Delete the current animations that effect the secondary nav.
Add a “While scrolling in view” animation to the “section_home_hero-header”.
Animation settings: set a “Move” animation to the secondary nav of -150% and place it at 95% of the timeline, add another “Move” animation of 0% at 100% of the timeline…
Done.
