changing an elements css position after scrolling down the page

Question

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/

Answer 1

Thanks to everyone for being so quick to help

this is what i wanted

$(document).ready(function() {
    var theLoc = $('ul').position().top;
    $(window).scroll(function() {
        if(theLoc >= $(window).scrollTop()) {
            if($('ul').hasClass('fixed')) {
                $('ul').removeClass('fixed');
            }
        } else { 
            if(!$('ul').hasClass('fixed')) {
                $('ul').addClass('fixed');
            }
        }
    });
});

Thanks!!!!!

Answer 2

I wrote this jQuery plugin to do just that.