使元素在滚动时固定

我试图使导航栏在用户向下滚动到导航栏时固定在顶部，然后在用户向上滚动超过导航栏时取消固定。我明白这只能通过JavaScript来实现。我是JavaScript的初学者，所以越简单越好。 这里是JSFIDDLE。

HTML如下：

   

    
         
HELLO GUYS
 
            
 WE ARE AN EVENTS MANAGEMENT COMPANY BASED IN LONDON. 

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