Sticky header CSS / JS

Question

I found this website today http://www.forward-thinker.co.uk/. Does anyone know how to make a sticky header like this.?

Answer 1

It's a technique called "sticky scroll" or "scroll follow"

I found some tutorials for you:

On Nettuts

or here

or here

or here

or here

and there's a resource here:

Jquery Stalker

Answer 2

That particular site utilizes jQuery's $(window).scroll event. It checks if the top of the scrolled-to area ($(this).scrollTop();) is below a certain height. If so, it adds to css of the header a class containing position:fixed (it also changes its height, since only part of the header scrolls). If the scrolled-to area is nearer to the top, the script removes the class containing position:fixed from the header's css and changes the height back to its original value.