How to get header to shrink and stay shrunk until back at the top?

Question

I am trying to get my header like this: http://commonreads.com/

Where when you scroll it shrinks and it only becomes full again when you return to the top. Currently,