changing an elements css position after scrolling down the page

I am messing around with some jquery trying to get to grips with it.

I have a ul nav which has a absolute position set but after I scroll the page down by 200 pixels i would like that to switch to position fixed so that the nav always stays on the page.

How would I do this?

below is the example I am working on

http://satbulsara.com/tests/