Oursky Code
  • AI
  • Auth
  • More from Oursky
    • Oursky Business Blog
    • GitHub
    • About Us
  • AI
  • Auth
  • More from Oursky
0
Subscribe
Oursky Code
Oursky Code
  • AI
  • Auth
  • More from Oursky
    • Oursky Business Blog
    • GitHub
    • About Us
  • UX/UI Design

Should you use Sticky Header?

  • January 3, 2018
  • 2 comments
  • 3 minute read
  • Ken Chan
https://unsplash.com/@dsmacinnes
Total
8
Shares
8
0
0

Sticky Headers are a frequently used pattern in front-end web development. At one of our team breakfasts, we saw Youtube’s sticky header break on IE. Yes, IE is an internet relic and always needs a little more support these days to run. But breaks like the Youtube case got some of our team members discussing sticky headers, and we figured we would share it here.

IE not mobile responsive
They are great for alerts, navigation, and even search when users are reading a long article or an infinitely scrolled product list.
This post is not a discussion about a responsive header solution. We are raising awareness of the amount of content we should put into a header for common situations such as:

  • Warning displays when disconnected from network;
  • Navigation breadcrumbs to show menu items;
  • Promotional item highlights or important user notices (such as usage policies for cookies)
sticky headers web UI
(Source: https://stackoverflow.com/questions/10474354/layout-with-fixed-header-and-footer-fixed-width-sidebar-and-flexible-content)

A good sticky header should be prominent but not block the original web content

A sticky header is visually fixed on a constant location throughout browsing. No matter how we implement the sticky property, it reduces the size of the main content. A common mistake is accidentally making the header space so big it is no longer a header. By displaying all the “necessary” links in the header, the content in the main area is squeezed out and unreadable. Calling the right amount of attention is essential.

Different ways to implement a sticky header

There are various ways to implement a sticky header. Below are some options.

Javascript + CSS way

CSS position fixed + JavaScript calculates the height of the header and inserts an appropriate margin-top to the main content. This hybrid method enables the header to fit its content size, but it is relatively more complex than the other methods below.

Table

Use a table to put the header and the main content into different <td>, so that the header never blocks the main body content. The size of the content in the header can be dynamic. However, because it is part of the main frame, the header is actually part of the <table>, so it looks like a table more than a UI with a header.

Pure CSS way

Using purely CSS with a media query is only good when you know the content length in the sticky header because otherwise header content may overflow in an ugly way.

The demo reproduced a case that breaks the UI — when content is way taller than the pre-defined header size, they might be invisible in the layout. You may need to handle the header resizing with simple JS just like the Javascript + CSS way.

Do you always need a sticky header?

Sometimes sticky headers don’t hurt, such as showing a proper warning message when someone is offline and they need to see the content that isn’t loading.

Developers can also consider hiding the header (make it less sticky) when necessary. For example, scrolling up will hide the header to give space for site visitors in Medium.

(Source: https://www.npmjs.com/package/header-scroll-up)

Sometimes, a sticky header isn’t needed. Alternatives can include a toast (slide up) notification or an in-line notification style.

In the end, all of these may be minor details. Sometimes, it’s worth thinking over how to make something work even if there are more updated solutions over breakfast to start the day.


If you found this piece helpful, give us some claps or *follow Oursky Publication for more startup/entrepreneurship/project management/app dev/design hacks! *👏
😻 At Oursky we’re all about helping brands and entrepreneurs make their ideas happen. Get in touch if you’re looking for a partner to help build your next digital product.

Read more from Oursky

Total
8
Shares
Share 8
Tweet 0
Pin it 0
Related Topics
  • internet explorer UI
  • sticky header
  • sticky headers and navigation menus
  • web development
  • website header design
Ken Chan

Previous Article
skypad skygear side project
  • Web

How I wrote a HackerNews top page app in 2 hours

  • October 25, 2017
  • David Ng
View Post
Next Article
discourse forum deployed on kubernetes k8s
  • Opensource

How to set up an internal team forum in half a day using Discourse

  • January 29, 2018
  • Ben Cheng
View Post
You May Also Like
View Post
  • Android
  • iOS
  • UX/UI Design

Offline-First: No More Network Connection Error

  • August 12, 2016
  • May Yeung
Top 10 Mobile App UX Design Mistakes
View Post
  • Android
  • iOS
  • UX/UI Design

Top 10 Mobile App UX Design Mistakes

  • November 24, 2015
  • Joyz Ng
View Post
  • UX/UI Design

UI 101: Simple Rules that make great front-end

  • July 6, 2015
  • Frank Lam
2 comments
  1. Farukh says:
    August 31, 2018 at 1:01 pm

    Hi, I really like it, specially the CSS method. I am just going to implement sticky footer into my website but I also found another solution here http://codeconvey.com/create-simple-pur-css-sticky-header/ so my question is does this solution also same as yours?

    I must appreciate you if you can help me out. Thanks Buddy.

    Reply
  2. Pingback: ▷ Lista De Verificare A Lansării Esențiale Pentru Aplicații Web și Aplicații Mobile | Routech

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe Us

Join our mailing list to never miss an update!

Oursky Code Blog
A team of Developers, Designers and Geeks. All about hacking and building things.

Input your search keywords and press Enter.