The Scroll Up Bar

A design pattern that is currently growing more popular is the fixed position bar at the top of the page. Sometimes the bar stays the same throughout, sometimes the header morphs into a slimmer bar as you scroll down, sometimes a completely new bar appears.

For example, as you scroll down on the New York Times website, the top navigation bar shifts from displaying typical site-wide navigation to article specific controls, showing the title of the article, the share link, the comments link, as well as compressed site-wide links:

the article bar at nytimes.com

At the Forbes website, as the user scrolls down the page a fixed position bar appears at the top promoting links to other articles the reader may find interesting, as well as a drop-down site navigation menu, search and user controls:

the fixed position bar at forbes.com

While these bars may be useful, they take up vertical space, reducing the reading space the user has chosen for themselves by picking the size of their browser window. Additionally, information displayed on these bars does not do anything to aid the reading of the actual content, making the bar more of a nuisance than help.

An interesting way to solve the issue is to hide the bar when scrolling down, and show it when scrolling up. On mobile interfaces, where space is precious, this technique is used to hide chrome, such as Web browser controls, but it’s also a good pattern to use on the Web. For example, Medium has just updated their new navigation bar. As you scroll down, the bar goes away, but it can be revealed at any time by scrolling up. Here’s what it looks like:

medium.com fixed position bar

Less annoying than bars that just sit there as you scroll down, and makes the menu easy to access without having to scroll up to the top of the page. Scrolling up won’t necessarily mean the user wants the navigation — they may just be scanning the content — but 100% of the people wanting the navigation will be scrolling up, making it a pretty good compromise.

Update 2014-06-16

For anyone interested in using this design pattern on their own sites, Eduardo Martins Barbosa has created a jQuery plugin that performs much the same way as the bar on Medium, including the subtle effect of revealing the bar at the scrolling speed of the user rather than simply sliding it down upon scrolling up.

author picture Written by Dmitry Fadeyev
Published on May 24, 2014