title: Sticky navigation bar with jQuery
body: <p>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?</p>
  
  <blockquote>
    <p>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. </p>
  </blockquote>
  
  <p><a href="http://redsky.incredifull.com" rel="nofollow">Here's a link to what I have which also shows the navigation bar.</a></p>
  
  <p>And <a href="http://www.hongkiat.com/blog/css-sticky-position/" rel="nofollow">here's a link to the tutorial I tried to follow</a></p>
  
  <p>Here's some relevant CSS:</p>
  
  <pre><code>/* Navigation bar */
  #navi {
  height: 40px;
  width: 961px;
  background: #1e416f;
  font-size: 14px;
  color: white;
  text-transform: uppercase;
  margin: 0 0 20px 0;
  }
  </code></pre>
  
  <p>Here's some relevant HTML:</p>
  
  <pre><code>&lt;!-- NAVIGATION --&gt;
   &lt;div id="navi"&gt;
   &lt;h1 class="logo"&gt;&lt;a href="#"&gt;CAUL/CBUA&lt;/a&gt;&lt;/h1&gt;
  
  &lt;ul id="primary-nav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Directories&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Committees&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Resources&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id="tools-nav"&gt;
      &lt;li class="login"&gt;&lt;a href="#"&gt;Log In&lt;/a&gt;&lt;/li&gt;
      &lt;li class="email icon"&gt;&lt;a href="#"&gt;Email&lt;/a&gt;&lt;/li&gt;
      &lt;li class="twitter icon"&gt;&lt;a href="#"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
      &lt;li class="search icon"&gt;&lt;a href="#"&gt;Search&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm not going to bother posting what I <strong>did</strong> have because there's not much in the tutorial <strong>at all</strong>. The <strong>only</strong> thing that I changed from what you see on that tutorial is where ever it says <em>nav</em> I changed it to <em>navi</em> because that's what I have in my CSS.</p>
  
  <p><strong>OR</strong> if anyone has any other similar ideas, I'm open to it.</p>