Sticky bars myths in web designing

Sticky bar, I thought can be used in many ways but overwhelming on users. I gone through many sites having different types of headers (sticky one). Some of them were very cool in a way that they were not not killing user experience instead but some of them put guns on me.

Sticky bar used on several conditions on several places like header,  social sharing bar, social icons, ad blocks (seems like spamming)  and sometimes sticky sidebars.

What's really best

The sticky bar remains the favourite till it covers pretty less space on document, but when it covers a big space on screen that look something weird.

The perfect example of a correct height of header is Disqus home page:

What makes this home page a better example is because:

• It attaches at top when scrolled, seems a pretty good effect.
• Covers a decent height.

One of the most creative example is Made With Code site.

Thinking to throw-up a tutorial on this too, well this is a project started by Google to let girls study coding. So what actually happens is when you scroll down the header hides but when you start scrolling in upward the header appears.

This simply cool solution to maintain a decent reading environment around the web.

The most creative example of sticky bar can be found on Google Plus. The Google Plus news feed header get stuck when a user scroll through it. The logo and several more elements transform and gives a cool effect. In Shah Allah I will share one tutorial on that too.

What's Productive

When it comes to productivity, sticky bars are largely used for design purpose instead of productivity. The best output you will get when you will not impose your design but declare it.

A productive example I found on HongKiat. When a user passes the article, a sticky bar appears with search bar, social sharing buttons and back to top button.

What I seriously DO NOT like

Browsing a site having sticky header that covers almost one fourth of screen  and can't even see something on page in mobiles, seriously hate that. Can't highlight any site but sticky headers should be designed in a manner that they do not cover a big part of screen.

Secondly, some of the cations that a designer should take is to make the design responsive and elements small enough to adjust in small headers even in mobiles.

Thirdly, a good suggestion is to make header like one in Made With Code site, you can make it easily with Headroom.js.

Few more words

Sticky bars have a positive impact if used correctly on site. I gave some of my inspiration that I might use in my upcoming designs. If you find any example or any new creative idea share it with me.