Make navigation bar fixed after scroll

[unarveDeavy]

I'm attempting to make the navigation bar stick to the top, when the user scrolls down to the nav bar and then unstick when the user scrolls back up past the navbar. The JSFIDDLE is here. Any help will be greatly appreciated. <section class="main"> <div id="wrap"> <div id="featured"> <div class="wrap"> <div class="textwidget"> <div class="cup"><img src="http://stackoverflow.com/questions/15469130/#""></div> <div id="header"></div></div></div></div></div></div></div> <div class="whiteboard"> <h1><a href="http://stackoverflow.com/questions/15469130/#">HELLO GUYS</a></h1> </div> </div> <div class="bg1"> <h2> WE ARE AN EVENTS MANAGEMENT COMPANY BASED IN LONDON. </h2></div>& the CSS .main{text-align:center;} h1{ -webkit-font-smoothing: antialiased; display:inline-block; font: 800 1.313em "proxima-nova",sans-serif; padding: 10px 10px; margin: 20px 20px; letter-spacing: 8px; text-transform: uppercase; font-size:3.125em; text-align: center; max-width: 606px; line-height: 1.45em; position: scroll; background-color:#e94f78; text-decoration: none; color:yellow; background-image:url; } h1 a{ text-decoration: none; color:yellow; padding-left: 0.15em; } h2{ -webkit-font-smoothing: antialiased; display:inline-block; font: 800 1.313em "proxima-nova",sans-serif; letter-spacing: 8px; margin-top: 100px; text-transform: uppercase; font-size:3.125em; text-align: center; line-height: 1.45em; position: scroll; text-decoration: none; color:white; z-index: -9999; } h2 a{ text-decoration: none; color:white; padding-left: 0.15em; } h5{ position: absolute; font-family:sans-serif; font-weight:bold; font-size:40px; text-align: center; float: right; background-color:#fff; margin-top: -80px; margin-left: 280px; } h5 a{ text-decoration: none; color:red; } h5 a:hover{ color:yellow; } #text1{ -webkit-font-smoothing: antialiased; display:inline-block; font: 800 1.313em "proxima-nova",sans-serif; margin: 20px 20px; letter-spacing: 8px; text-transform: uppercase; font-size:3.125em; text-align: center; max-width: 606px; line-height: 1.45em; position: scroll; background-color:#E94F78; } #text1 a{ color:yellow; text-decoration: none; padding-left: 0.15em; } #text1 a:hover{ text-decoration: none; cursorointer; } .whiteboard{ background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg); background-position: center; padding: ; background-color: #fff; z-index: 1000; } .bg{ height:2000px; background-color:#ff0; background-image:url(http://alwayscreative.net/images/stars-last.jpg); position:relative; z-index: -9999; } .bg1{ background-image:url(http://alwayscreative.net/images/stars-last.jpg); z-index: -9999; height:1000px; } /* Header */ #wrap { margin: 0 auto; padding: 0; width: 100%; } #featured { background: #E94F78 url(http://www.creativityfluid.com/wp-content/themes/creativityfluid/images/img-bubbles-red.png) no-repeat top; background-size: 385px 465px; color: #fff; height: 535px; overflow: hidden; position: relative; z-index: -2; } #featured .wrap { overflow: hidden; clear: both; padding: 70px 0 30px; position: fixed; z-index: -1; width: 100%; } #featured .wrap .widget { width: 80%; max-width: 1040px; margin: 0 auto; } #featured h1, #featured h3, #featured p { color: yellow; text-shadow: none; } #featured h4{ color:white; text-shadow:none; } #featured h4 { margin: 0 0 30px; } #featured h3 { font-family: 'proxima-nova-sc-osf', arial, serif; font-weight: 600; letter-spacing: 3px; } #featured h1 { margin: 0; } .textwidget{ padding: 0; } .cup{ margin-top:210px; z-index: 999999; } .container{font-size:14px; margin:0 auto; width:960px} .test_content{margin:10px 0;} .scroller_anchor{height:0px; margin:0; padding:0;background-image:url()} .scroller{background:#FFF; background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg); margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}