title: Make navigation bar fixed after scroll
body: <p>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 <a href="http://jsfiddle.net/jpXjH/" rel="nofollow">JSFIDDLE is here</a>. Any help will be greatly appreciated.</p>
  
  <p>Update: I understand that this can't be implemented through CSS &amp; HTML. What would be the best way to implement this?</p>
  
  <pre><code>    &lt;section class="main"&gt;
       &lt;div id="wrap"&gt;
  
              &lt;div id="featured"&gt;
           &lt;div class="wrap"&gt;      
        &lt;div class="textwidget"&gt;
          &lt;div class="cup"&gt;&lt;img src="#""&gt;&lt;/div&gt;
      &lt;div id="header"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class="whiteboard"&gt;
               &lt;h1&gt;&lt;a href="#"&gt;HELLO GUYS&lt;/a&gt;&lt;/h1&gt;
  
  
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;div class="bg1"&gt; &lt;h2&gt; WE ARE AN EVENTS MANAGEMENT COMPANY BASED IN LONDON. &lt;/h2&gt;&lt;/div&gt;
  </code></pre>
  
  <p>&amp; the CSS</p>
  
  <pre><code>          .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;
                cursor:pointer;
            }
  
            .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;}
  </code></pre>