Question

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

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

You will notice that as you scroll the page, the header slowly moves upward until it disappears from view. I want to achieve this same effect. I believe it will need some JS and CSS positioning but still have no clue how to achieve this. Is this done with parallax scrolling?

Would appreciate if someone could give me a quick example of the code used to do this with a element. So I can then use it on my own site.

Cheers.

Answer 1

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

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