How to create parallax scrolling effect using CSS and Jquery?

The parallax scrolling is quite famous because of it adds a new beauty in your design,specially on homepage where it normally exist.To create this effect I got a simple trick make it,just have a look at the pen below:

Actually this phenomenon work under a simple principle.For that you need two make sure that the header should be attached to the top without any space.Secondly,make sure that the header should scroll along the whole page.

Parallax work under three things:

1. Fixed top header.
2. Middle banner must have fixed position and have margin-top of height of header.
3. Content should be having position relative and have margin of sum of height of header and content.