Swap Navigation links once user scrolls down 500 pixels

Trying to beef up my front-end skills, so any help is greatly appreciated!

I have two links in a horizontal navigation bar, ‘WORK’ ‘ABOUT ME’ — I would like those to change to ‘TOP’ once the user scrolls down 500px. The navigation bar is fixed to the top so users can jump back up to top when they are in the ‘WORK’ ‘ABOUT ME’ sections.

What is the simplest way to go about coding this?

Thanks for your help!

check out this site, once you start scrolling a different nav drops down

http://onemightyroar.com/

So I have been able to get the ‘TOP’ to display on scroll with this javascript. Now my issue is how to have it display only after the user has scrolled down 500px?

<script src="jquery.js"></script>
<script type="text/javascript">
$(function() {
	$(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},100);
	});	
});
</script>