Once nav bar reached top of window, how to keep it there?

Question

Here is a sample js fiddle. The nav bar is right below the section that says "Hello World", and then the content is below that nav bar. Is there a way, when scrolling down to see the content, once the nav bar reaches the top of the window to keep it there? So it stays fixed to the top once it reaches the top. No matter how far you scroll down, it wont scroll off the page, but will fix itself to the top once it gets there. Any help? Thanks so much!

jsfiddle: http://jsfiddle.net/Ptx4e/

Here is the css for the js fiddle:

#head{
   width:100%;
   height:200px;
}

h1{
    text-align:center;
    padding-top:70px;
}

nav{
    background-color:black;
    overflow:hidden;
    width:100%;
}

nav ul{
    color:white;
    list-style:none;
    text-align:center;
    margin:0;
}

nav ul li{
    display:inline-block;
    padding:1% 6%;
}
nav ul li:hover{
    background-color:tomato;
}

Answer 1

A small bit of jquery you can achieve the sticky header. check the DEMO.

Here is the jquery code.

  $(window).scroll(function () {

    if ($(window).scrollTop() > 280) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 281) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });