Floating sticky menu

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);
except my menu is in the centre of the page!

My mark up is as follows;

<!DOCTYPE html> 
<html lang="en"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<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>


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

<script type="text/javascript">



<div id="parallax">
  <div id="back"></div>
  <div id="smallballs"></div>
  <div id="bigballs"></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>


and the css is;

@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?

There’s the sticky-float jQuery plugin that you can use. The [url=“http://plugins.jquery.com/files/stickyfloat_0.htm”]demo page shows it with some easing, but that’s only because it has a duration. When you specify a duration of 0 there is no easing.