What facebook taught me

A few days ago I was working on a sticky header for thetudu, all I wanted was just a fixed position header that overlap the content on scrolling. So far sounds good and really easy, you don’t even want Javascript, some pure classic CSS code is the deal. So let’s see how the code should look like:

HTML

<div class="header-container"/>
   <header class="header">
      <!-- content here -->
   </header>
</div>

And the CSS is pretty simple too

.header-container {
   min-width: 980px;
   height: 40px;
   position: fixed;
   left: 0;
   top: 0; 
   right: 0;
}

.header {
   width: 980px;
   margin: 0 auto;
}

Everything seems we are ready and if you test it, it works really good. The header is sticked at the top and the content scrolls beneath. I was thinking the same, when I got a big WOW, BOOM, WTF moment of my life, you know that time when you realize that everything you know is nothing and you just discover that your code all these years didn’t work… Is the same moment when I discovered the use of clearfix (where all my sites were invisible broken), or the time I learnt that evertyhing is an object in JS.

Wait a minute what are you talking about?

You will see right away. Now open the following pages and try to resize the window horizontally, in other words make it as thin as you can. Simulate a case that your users have a small screen, smaller than your site’s width, or maybe a mobile phone.

• A cool task management app flow
• Or woothemes which is a famous marketplace with best selling themes
• Also one more best selling author Orman Clark

BOOM! The content is hiding at the end of the window and there is no way to make it come back to the surface again, lost! This moment is when you realize that all your sticky headers/footers don’t work! And this is very important problem because in all cases above something crucial is missing, signup or purchase.

Personally I think that you should care for your visitors and examine all the possible aspects, this is what facebook does and the others don’t, this is what Dan Cederholm call handcrafted

But man, I have seen it work on facebook

I said the same words and I jumped straight forward on facebook to check their code. And voila! Facebook’s header works really well. Why? Because they check when you resize the window and if your window is smaller than their min-width the sticky header becomes a regular header and goes back at the top of the page, not the browser. Check this video to understand what I’m saying.

And how it works?

The idea is pretty simple and smart but more complex than the first case. So let’s see the differences in the markup and the CSS.

HTML

<div class="header-placeholder">
   <div class="header-container">
      <header>
         <!-- content here -->
      </header>
   </div>
</div>

First, we need one more div as placeholder. The placeholder holds an empty space for the header, so when the header is “flying over the content” and it’s time to landing back to the page as a regular one it needs some space for this. The CSS is more complex and we’ll see it step by step.

Placeholder’s styling

.header-placeholder {
   height: 40px;
   /* It needs only height just to save the space we want */
}

Then we keep the old code as it is

.header-container {
   min-width: 980px;
   height: 40px;
   position: fixed;
   left: 0;
   top: 0; 
   right: 0;
}

.header {
   width: 980px;
   margin: 0 auto;
}

A now the magic, a media query to handle the window size:

@media only screen and (max-width: 979px) {
   .header-fixed {
      position: relative;
   }
}

Now if our window is less than 980px, the header will change back to static. If you want to support older browsers you have to use some Javascript to make it work.

Javascript (I’m using jQuery, you can do it with plain javascript too)

function checkSize(){
   if ( $(window).width() < 980 ){
      $('.header-container').addClass('is-static');
   }else {
      $('.header-container').removeClass('is-static');
   }
}();

/* Then check again on resize */
$(window).resize( checkSize );

Finally some extra CSS to handle is-static class

.is-static {
   position: relative;
}
/* If you use a more specific selector on .header-container (e.g. #top .header-container),
   you need to use !important (e.g. position: relative !important;) */

And that’s all! From now all your sticky headers/footers will work perfectly with the right way and I’m waiting to see a lot of websites implement this way. The problem is not exists in the websites that follow the Responsive Web Design technique, but we can’t make everything responsive, so facebook’s way will be useful for all of us.

Left your comment and write your thoughts and suggestions…