Shrinking Nav on Scroll – It’s a Kind of Magic

One can say that I am an observer. I look at a lot of “things.”  One thing that I have been noticing on websites are navigation bars resizing on scroll. It is like the next generation of what some people call “sticky” or fixed navigation. The nav is always present, even when scrolling down and so it saves the user the trouble of scrolling up too much once they’ve gone down.

So, what is the added bonus of making the nav shrink upon scroll like the sites listed below? Well, besides the obvious fact that sites are meant to be scrolled — the sticky nav takes care of that — it also addresses the idea that you need to make room for content. After all, content is king.

Here are some examples of sites that leverage this auto resizing technique.

Also, a good resource for designers and developers alike for this function is Codrops. They refer to this as an on-scroll animated header:

http://tympanus.net/codrops/2013/06/06/on-scroll-animated-header/

My Emma

MyEmma.com

One of my favorite examples of a shrinking nav is MyEmma.com. In general, Emma has a really fantastic brand sensibility. It is a really lovely UI and a wonderful site layout. Check out the nav on scroll. Good stuff, people.

 

99u

99u.com

Here is a blog site by the good people at Behance. This one not only resizes, but it also changes color to fade back more for the content to be highlighted.

 

 

IBM

IBM.com

IBM’s internal pages do this on scroll. I have to say that this isn’t my favorite example, but it is still solid nonetheless.

Mashable

Another site and its changing nav that is worth noting is on Mashable.com. While the nav doesn’t shrink or resize, it does change color and content. It goes from a universal nav to more of a social sharing nav bar. Changing from its predominantly blue palette to a white one helps it give way to the content. Then, it also changes to have social share buttons that are likely used a lot on their articles. They want to make sure that sharing is easy to find, so it makes sense to change the nav in this case. Good idea!

And here’s a different kind of magic to entertain you. Happy New Year!

Do you have a favorite example of a site that uses shrinking nav? Share it in the comments.