Sticky navigation bar with jQuery

Sticky navigation bar with jQuery

I'm trying to get a sticky navigation bar for my web page and am having
troubles with what I found. Maybe someone can help me out?
The idea of 'sticky position' is to make elements on a website stick and
remain visible. Those elements will initially be in their position, and
then in the event of scrolling down the webpage, their position will be
following the scroll.
Here's a link to what I have which also shows the navigation bar.
And here's a link to the tutorial I tried to follow
Here's some relevant CSS:
/* Navigation bar */
#navi {
height: 40px;
width: 961px;
background: #1e416f;
font-size: 14px;
color: white;
text-transform: uppercase;
margin: 0 0 20px 0;
}
Here's some relevant HTML:
<!-- NAVIGATION -->
<div id="navi">
<h1 class="logo"><a href="#">CAUL/CBUA</a></h1>
<ul id="primary-nav">
<li><a href="#">Directories</a></li>
<li><a href="#">Committees</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">About</a></li>
</ul>
<ul id="tools-nav">
<li class="login"><a href="#">Log In</a></li>
<li class="email icon"><a href="#">Email</a></li>
<li class="twitter icon"><a href="#">Twitter</a></li>
<li class="search icon"><a href="#">Search</a></li>
</ul>
</div>
I'm not going to bother posting what I did have because there's not much
in the tutorial at all. The only thing that I changed from what you see on
that tutorial is where ever it says nav I changed it to navi because
that's what I have in my CSS.
OR if anyone has any other similar ideas, I'm open to it.