Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

The Bootstrap documentation site uses a very interesting navigation concept.

They have a per-page navigation bar that sticks on top of the page once you scroll down and highlights the current area on the page as you go.

Here is a screenshot of the navigation bar when you are at the top of the page.

enter image description here

The red rectangle is not part of the design, it is used to highlight what navigation bar I'm referring to.

This is a screenshot of the same page but scrolled down a bit.

enter image description here

Note how that navigation bar suddenly stretches across the entire width of the page and always sticks at the top.

Is there a name for this navigation concept, if so, what is it called?

share|improve this question
    
I'd simply refer to the act of "sticking" as "anchoring" the nav bar but I'm not aware of a specific term for this sort of nav element. Google uses them a lot. –  Ben Brocka Feb 16 '12 at 16:37
1  
I just sent the question to the "resident Bootstrap expert", aka @mdo aka the Creator. –  dnbrv Feb 16 '12 at 19:10
    
This sticky header is one of my favorite navigation improvements in the last 5 years. I wish is was more widespread. –  drawtheweb Sep 18 '12 at 19:51

5 Answers 5

up vote 7 down vote accepted

There is no well-stablished name for this pattern. The term "sticky headers" is usually applied to interface elements that are fixed from the beginning.

The fact that some navigation elements become "sticky" while they are relevant is a subtle but interesting difference. In this way, the visual hierarchy is kept despite of scroll.

Gilles Vandenoostende refered to this pattern as Dynamically Fixed UI. More recently, a CSS position named 'sticky' has been proposed and it is supported by Webkit for this behavior.

This mechanism is also applied to group heading in lists on some mobile platforms. Android contact app uses this approach:

enter image description here

share|improve this answer

They call it ScrollSpy on their site.

The ScrollSpy plugin is for automatically updating nav targets based on scroll position.

share|improve this answer
2  
Thanks! That is for highlighting the area as you go. I see. Embarrassing that I didn't find that piece of information myself, however that doesn't answer how that stick at the top navigation concept is called. –  Octavian Damiean Feb 16 '12 at 10:33
    
I'd like to add that scroll spying is especially useful when designing parallax scrolling sites. This is a cool feature but it can easily turn into a navigational nightmare. Sony's landing page for their tablet is a showcase example of how to use scroll spying: discover.store.sony.com/tablet it also changes the URL according to section. –  ajkochanowicz Feb 16 '12 at 14:51
2  
ScrollSpy is the name of the plugin that manages the navigation/scrolling behavior. The OP's question seems to be about the name for the overall design/interaction pattern. –  Rob Flaherty Feb 16 '12 at 17:57
    
In this case the sticking effect is achieved by assigning the subnav-fixed class to fix the position of the menu bar in response to scroll events. –  Pau Giner Feb 16 '12 at 20:20

Looks like a variation on the "Google" menu bar. Attached to the top with anchors setting off events. Easy to attach(CSS) the navbar. Maybe a JQuery tool for the events?

share|improve this answer

Like others said, there is not agreed upon name for this UI pattern. In addition to “Sticky Element” and “Dynamically Fixed Element”, one name I found was “Fixed Floating Element”.

I’ll just add that, thought this pattern is most useful for toolbars and navigation, nothing stops you from using it for other types of content. I’ve seen it used for non-essential navigation, ads, or even a page’s main text content (e.g. on media-rich pages such as designer or photographer portfolios).

share|improve this answer

If you're asking what the name is for the design pattern of a full-width navigation bar that "sticks" to the top of viewport, I'm not sure there is a single agreed upon name. But I generally refer to them as a "fixed navbar" or "fixed menu bar".

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.