Morph NavBar

Morphing navigation bar

This component is a scroll-reactive navigation bar . It is a single, smart user interface element that watches how far a user scrolls down a webpage. When the page is at the very top, the navigation bar stays hidden, and a large sign-up or action button sits normally in the middle of the main screen. The moment the user scrolls down past that first section, the navigation bar smoothly slides down from the top of the screen to stick there. As it appears, the main button from the screen dynamically shrinks and flies right into the navigation bar, locking into place as a small menu item. If the user scrolls back up, the button flies back out to its original spot, and the navigation bar disappears.

Morphing navigation bar