Fixed Nave bar

by Jaganathan

HTML

<div id="container">
        Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required. Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required. Stack Overflow is a question and answer site for professional and enthusiast programmers.
        <h1>Logo</h1>
        <div id="menu">
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
            <li><a href="#">Link 6</a></li>
        </ul>
        </div>
        <div id="main">
        <p>
            <h1>Scroll down to the effect</h1>
       Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required. Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required. Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration...

CSS

*{
     margin:0;
     padding:0;
}

body{
    font-family: Calibri, Arial, Verdana;
    font-size:0.95em;
    line-height:1.5em;
}
    
 
 p{
     margin: 10px 0 15px;
 }
 
 #container{
     width: 960px;
     margin:0 auto;
 }
 
 h1{
     font-family: 'Cambria',Georgia;
     font-size:1.9em;
     padding: 30px 0 20px;
     line-height: 30px;
 }
 
 #menu{
     background: #333;
     height:35px;
 }
 
 #menu ul li {
     border-left: 1px solid #999;
     border-right: 1px solid #cacaca;
     float:left;
      font-weight: bold;
     line-height:35px;
     list-style: none;
      text-transform: uppercase;
 }
 
 #menu a{
     color: white;
     display:block;
     padding: 0 20px;
     text-decoration:none;
 }
 
 #menu a:hover{
     color:gray;
 }
 
 #menu.fixed{
     background: #777;
     position:fixed;
     left:0;
     top:0;
     width:100%;
 }
 
 #menu.fixed ul{
     display: block;
     margin: 0 auto;
     width:960px;
 }
 
 #menu.fixed+#main{
     margin-top:45px;
 }

JavaScript

var menuOffset = $('#menu')[0].offsetTop;

$(document).bind('ready scroll', function() {
    var docScroll = $(document).scrollTop();

    if (docScroll >= menuOffset) {
        $('#menu').addClass('fixed');
    } else {
        $('#menu').removeClass('fixed');            
    }

});