How to slowly move the title when the user scrolls the page?

Question

I want to achieve the effect that is used in this header on this example website:

http://anchorage-theme.pixelunion.net/

You'll notice that as you scroll through the page, the title moves slowly up until it disappears from view. I want to achieve the same effect. I believe that this will require some JS and CSS positioning, but still do not know how to achieve this. Is this done with parallax scrolling?

It would be nice if someone could give me a quick example of the code used for this with the element. Therefore, I can use it on my own site.

Greetings.

Answer 1

$ (window) .scroll (function () {...}) is the one you need here

$ (document) .scrollTop () is the amount of scroll distance from the top

Answer 2

Use this:

$(window).scroll(function(){ if ($(this).scrollTop() > x){ // x should be from where you want this to happen from top// //make CSS changes here } else{ //back to default styles } });