I’ve been seeing this behavior across various native apps & web sites: navigation goes away as you scroll the site/app, and upon scrolling up it reappears. I’m calling it “shy nav” simply because in most implementations the nav hides after a couple seconds of being shown on scroll up.

Teehan+Lax employs a hiding navigation method.

The nav gets out of the way as you scroll down the page, so you can see more content. Conversely, when you scroll up the nav intuitively reappears. You can see similar behavior in Google’s mobile search app & Bing search on the web (I’m sure there are more).

MailChimp's navigation implementation gets out of the way when you don't likely need it.

Let’s take a look at why you might want to use (or avoid) this technique:

Pros

  • less necessary to have a “back to top” button
  • not necessarily to scroll all the way up to access navigation
  • takes up less space than an always-fixed nav
  • doesn’t cover content all the time

Cons

  • a little more complex than a simple static-or-fixed position nav (because it’s both, depending on context)
  • even more complex if you want to react to mouse movements smartly (what if a user moves toward the nav when it’s disappearing)
  • disappears if you have not interacted with it over some period of time (unless you are at the top of the page)

I decided to whip up a little plugin to implement this technique on any navigation-type element you want. This is just a rough implementation, but makes it really easy to add to your site with a little css + this script. If you’ve got suggestions to improve this or caught an error, please share!

Check out the code in action on CodePen