Reload page without reloading the header

Take Canvas documentation page for example.
Every time when a link on the header is clicked, the whole page fades out, preloader animation, and the new page fades in.
I want to know how to make page loading without reloading the header again and again (because the header section always remains the same).

Thank you!

I've tried to move the header tag outside of .wrapper but it doesn't work. I really like your preloader effect, but I want to keep the header not reloading at the same time. Please tell me how can it be possible. Thanks!

You would need to sit the content into an iframe, allowing you to reload the frame without loading the header, or have the content loaded dynamically using Ajax when a link is clicked.

Both bad ideas imo :)

If you are worried about transferring extra data every time the header loads, have a look in the docs about optimizing the site; it gives instuctions on how to make sure the html is being properly cached on the client side.