how to get this effect ?
You mean like on the GetGrav homepage?
exactly !
It’s exactly the same as the header in Antimatter theme. You can see it in action here:
Basically it’s just CSS and JavaScript. There’s a JS function in antimatter.js called scrollHeader() and that just toggles a CSS class on the header element as you scroll past a certain point. Then the rest is just CSS to set the sizes and enable animations. You can find that in the scss/template/_header.scss file.
okay thanks 
wow, this skeleton demo is great. love you guys !
In case you missed it, we have several skeletons with various themes, content, plugins and setups.
These are a great way to get quickly setup with a site to start developing on.