Nav Slides From Bottom of Page to Top

I posted before, and figured out most of what I need, but now I am having issues with my navigation. What I want to do is on this one page scrolling site, on the home page have the nav sit at the bottom and as you scroll up to the second “page” the nav scrolls up and then fixes at the top. Example site:

[url]www.joinsessions.com[/url]

Here is the code I am working with….

[CODE]
var scroller = $(this);
var scrollOffset = scroller.scrollTop();
if (scrollOffset < 750) {
$(‘#page-header’).css(‘bottom’, scrollOffset + 0);
nav.removeClass(‘highlight’);
} else if ($(‘#page-header’).css(‘top’) != 500) {
$(‘#page-header’).css(‘top’);
nav.addClass(‘highlight’);
}
[/CODE]

Then there is some CSS that looks like this….

[CODE]
#page-header {
position: fixed;
bottom: 0%;
width: 100%;
height: 90px;
}
[/CODE]

I’m not sure how to get the nav to sit 100% at the top when you scroll. Is there a way to create variables as a percentage and use that in the javascript above? You can see if you scroll the browser window size you end up losing the nav all together past 750px.

Here is my working example:

[url]http://www.andyrichin.com/canary-path/new2/example2.html[/url]

Thanks!

Also in #JavaScript _↴