Header changes as you scroll down (jQuery)

Question

TechCrunch recently redesigned their site and they have a sweet header that minifies into a thinner version of their branding as you scroll down.

You can see what I

Answer 1

Although the answers before seem a perfect solution, it appears that TechCrunch use z-index and fixed positioning to make this scroll effect.

As you can see from the image above, both the large and small header are both on the screen and this wouldn't happen without tweaking the jQuery scroll event.