Criteria for a valid sticky top bar

Question

I see lot of websites that has design responsive for all devices, with css styling that as a user [, designer, and developer] can say that put effort upon. They use a banner/header/menubar on the topmost part of the site. There are with 35px or less thickness, other with 50 or more. Some has search fields on it, while other don't. Some has menu items, others have logo.

Im not asking when to use a stick top bar and when should not. I'm asking on what should be the criteria of a top bar for it sticky-"certified". They say that any top bar that is not for mobile devices are qualified, but I have seen good mobile designs using stick top bar. Some says make it first thin before gluing, but some thick banners are sometimes glued.

Sometimes there are thick banners but when you scroll down, it glues at the top edge and becomes thin. Yet there are some thick banner that when you scroll, are glued but are not shrink-ed. Yet there are some thick banners that are not glued at all... What's with the first two banner that is not found on the third banner for the developer of the third banner not to make it sticky?

I believe that even if all reasons are there for a designer to make a top bar sticky (e.g., it contains vital navigation links, etc.), the designers still leave it as is because of "these certain criteria".

Answer 1

The criteria varies and the usual answer is "it depends". I go by this principle,

If the user has to scroll or do complex interactions to get to UI:A on PAGE:A just to interact and navigate to PAGE:B then make UI:A sticky.

Its made up, and origin is common sense.

But then, sites like medium.com have a variation of this sticky top bar. When a user scrolls up, the site pushes the top bar into view and sticks it. It stays stuck until you scroll down again or until its lifespan lasts i.e. there's a timeout event.

The concept here works because, medium is a blog. Content flows downward and when a user scrolls up, its understood he's either looking for a menu or just navigating to have have a better look at something he scrolled past. That's a very good use of cognitive science.

I hope this helps you find what you're seeking.

Answer 2

The sticky header should contain tools or information that are so important for the website that you need to access them from everywhere at any given time.

This could be the search and their settings on Google, your money amount on an online banking website or current running popular livestreams on Twitch while searching for something to watch.

Facebook and Twitter for example uses sticky header to provide the functionality of content creation which is important for the survival because they need content to function properly.

It is true that you cannot spare that space on mobile device but you are able to make the bar invisible on regular down-scrolling and only show it if the user scrolls slightly to the top. This is more natural to mobile users than you might think.