Hey guys, I'm creating my first website and I have been playing with a few tutorials and learning some neat tricks but for the sake of simplicity I will get straight to the point.

I am using HTML5 and have started by making a large header which has a parallax effect, that works just fine, underneath that I have a container div for the entire site and inside that for testing purpose I have a logo, centred, bellow that a menu bar, also centred, and the 'page' which is basically where the content will go

What I want is for the menu bar to stay in the position i have placed it but upon scrolling down I want to to stick to the top of the browser with no easing effect just simply glued to the top until i scroll back to top, then I want it to get back into its position.

I have tried many, many, many times but I just cant seem to make it work
so if any one can either explain how to do so or direct me to a detailed tutorial

This is the exact effect I want(the 'help' button/menu);
http://linowski.ca/experiments/03_sticky_floating_nav/
except my menu is in the centre of the page!

My mark up is as follows;
Code:
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.jparallax.js"></script>


<style>

</style>
<link href="stylesheet2.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#parallax').jparallax({});
});
</script>

</head>

<body>

<div id="parallax">
  <div id="back"></div>
  <div id="smallballs"></div>
  <div id="bigballs"></div>
</div>

<div id="main" class="container">

<div id="logo"><img src="logo.png" width="514" height="154" alt="logo"></div>

<nav><img src="menu.png" width="514" height="41" alt="nav"></nav>

<div id="page"><img src="page.png" width="963" height="4572" alt="page"></div>

</div>
</body>
</html>

and the css is;
Code:
@charset "UTF-8";
#parallax {
	position:relative; overflow:hidden; width:100%; height:632px; background:url(backgroundp.jpg); background-position:center; background-repeat:no-repeat;
}

#back {
	position:absolute; width:95%; height:615px; background:url(back.png);
}

#smallballs {
	position:absolute; width:98%; height:622px; background:url(smallballs.png)
}

#bigballs {
	position:absolute; width:90%; height:605px; background:url(bigballs.png);
}

body { background-color:#f6f6f6;text-align:center;margin:0 auto;
}

#logo {
	background-image:url(logo.png); width:514px; height:154; margin: auto;
}

#page {
	width: 963; height: 4572; margin: auto;
}

#main {
	width: 963px; margin: 0 auto;
}

nav {
	width: 514px; height: 41px; margin: auto;
}

so now what?