Sticky navigation bar with jQuery

Question

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.

Answer 1

jQuery solution, toggle between classes, CSS is used from your site with little additions, here's a jsFiddle http://jsfiddle.net/mdesdev/AVUH4/

HTML

<div id="navi" class="default">

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

CSS

#navi {
  height: 40px;
  width: 961px;
  background: #1e416f;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#navi a:hover {
  background: white;
  color: #1e416f;
}
#navi .logo {
  margin: 0;
  padding: 0;
  float: left;
}
#navi .logo a {
  float: left;
  width: 56px;
  height: 40px;
  background: url(/imgs/navi/caul_white_nav.png) center no-repeat;
  text-indent: -9999px;
}
#navi .logo a:hover {
  background: url(/imgs/navi-hover/caul_blue_nav.png) center no-repeat;
  background-color: white;
}
#primary-nav, #tools-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
#primary-nav li, #primary-nav a, #tools-nav li, #tools-nav a {
  float: left;
}
#primary-nav a, #tools-nav a {
  color: white;
  text-decoration: none;
  padding: 0 10px;
  border-right: 1px solid white;
  line-height: 40px;
}
#tools-nav a:hover {
  color: #1e416f;
}
#primary-nav li:first-child a, #tools-nav li:first-child a {
  border-left: 1px solid white;
}
#tools-nav {
  float: right;
}
#tools-nav .icon a {
  text-indent: -9999px;
}
#tools-nav .email a {
  background: url(/imgs/navi/mail.png) no-repeat scroll center center transparent;
  width: 20px;
}
#tools-nav .email a:hover {
    background: url(/imgs/navi-hover/hover_mail.png) no-repeat scroll center center         transparent;
    width: 20px;
}
#tools-nav .twitter a {
    background: url(/imgs/navi/twitter.png) no-repeat scroll center center transparent;
    width: 20px;
}
#tools-nav .twitter a:hover {
    background: url(/imgs/navi-hover/hover-twitter.png) no-repeat scroll center center transparent;
    width: 20px;
}
#tools-nav .search a {
  background: url(/imgs/navi/search.png) no-repeat scroll center center transparent;
  width: 20px;
}
#tools-nav .search a:hover {
  background: url(/imgs/navi-hover/hover_search.png) no-repeat scroll center center transparent;
  width: 20px;
}
.default {
  margin: 0 0 20px 0;
}
.fixed {
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -480px;
}

jQuery

$(function() {

  var navi     = $( '#navi' ),
      naviOff  = navi.offset();

  $( window ).scroll(function() {

    if($( this ).scrollTop() >= naviOff.top + navi.height() && navi.hasClass( 'default' )) {

      navi.removeClass( 'default' ).addClass( 'fixed' ).fadeIn( 'fast' );
    } 
    else if($( this ).scrollTop() <= naviOff.top && navi.hasClass( 'fixed' )) {

      navi.removeClass( 'fixed' ).addClass( 'default' ).fadeIn( 'fast' );
    }

  });

});

Answer 2

jQuery Waypoints is incredibly useful.

You can have a navigation bar stick once it reaches the top of the page.

$('#navi').waypoint('sticky');

and in your CSS

#navi .stuck { position:fixed; }

should do the trick!

Answer 3

You will need to add something like the following:

#navi {
    position: fixed;
    top: 0px;
    left: 0px;
}