Animating the menu on scroll

In our current version of the SecondPlate landing page, the top menu is only visible and accessible if you're at the very top of the page. Once you scroll, the menu is out of reach.

But what if we wanted the menu to always be visible so that it's in easy reach, regardless of where on the page the visitor is? We could achieve this by fixing the menu to the top of the page so that it sticks there as you scroll. This could be handy, but making the menu always visible may take up too much valuable attention and real estate, especially on smaller screens such as mobile phones.

This is where a simple interaction could come to the rescue.

What we can do is hide the menu when the user scrolls down the page and make it reappear whenever the user begins to scroll back up. This is a type of anticipatory design; we show elements to users only when we anticipate that they might want to see them.

Let's begin by making the menu fixed to the...