Статический заголовок при прокрутке

Я закодировал домашнюю страницу, и теперь я пытаюсь создать заголовок, который не является прокруткой, когда прокручивается контент. Он должен оставаться на вершине, пока контент находится ниже/под ним. Я нашел это решение здесь, однако, он не работает для меня, поскольку я не знаю, куда положить этот код, потому что все, что я пробовал, не работает.

Нажмите здесь для jsfiddle !.

Мой HTML:

<!-- #PAGE -->
<div id="page1"> 

  <!-- #HEADER -->
  <div id="header1">
    <div class="content-wrapper">
      <div class="ft-div-left"> 
      <center>
      <img src="FW_Logo_Website.png">
      </center>
      </div>
      <div class="ft-div-right">
        <center>
            </br>
          <a href="logout.php" style="text-decoration:none;">
          <button class="button-logout" name="Ausloggen">Logout</button>
          </a>
        </center>
      </div>
      <div class="ft-div-middle"> </div>
    </div>
  </div>
  <!-- HEADER ENDE --> 

  <!-- #CONTENT -->
  <div id="content">
    <div class="wrapper">
      <div class="left_box">
        <center>
          <img alt="" src="images/camera.png" width="100" height="100" />
          <h1 class="headline" style="font-family:'Montserrat',sans-serif;">RAW DATA</h1>
          <p class="explanation">Alle unretuschierten Fotos.</p>
          <table>
            <tbody>
              <tr>
                <td><img alt="" src="images/megabyte.png" width="20" height="20" /></td>
                <td> 24.5 MB</td>
              </tr>
              <tr>
                <td><img alt="" src="images/image.png" width="20" height="20" /></td>
                <td> 758</td>
              </tr>
              <tr>
                <td><img alt="" src="images/resolution.png" width="20" height="20" /></td>
                <td> 3459 x 3294</td>
              </tr>
            </tbody>
          </table>
          </br>
          <button class="button" name="DownloadRaw" onClick="getRawData()">Download</button>
        </center>
      </div>
      <div class="right_box">
        <center>
          <img alt="" src="images/brush.png" width="100" height="100" />
          <h1 class="headline" style="font-family:'Montserrat',sans-serif;">RETUSCHIERT</h1>
          <p class="explanation">Alle retuschierten Fotos.</p>
          <table>
            <tbody>
              <tr>
                <td><img alt="" src="images/megabyte.png" width="20" height="20" /></td>
                <td> 24.5 MB</td>
              </tr>
              <tr>
                <td><img alt="" src="images/image.png" width="20" height="20" /></td>
                <td> 758</td>
              </tr>
              <tr>
                <td><img alt="" src="images/resolution.png" width="20" height="20" /></td>
                <td> 3459 x 3294</td>
              </tr>
            </tbody>
          </table>
          </br>
          <button class="button" name="DownloadRet" onClick="getRetouchedData()">Download</button>
        </center>
      </div>
      <div class="clearer"></div>
    </div>
  </div>

  <!-- #FOOTER -->
  <div id="footer1" style="position: fixed; bottom: 0;">
    <div class="content-wrapper">
      <div class="ft-div-left"> </div>
      <div class="ft-div-right">
        <p></p>
      </div>
      <div class="ft-div-middle">
        <center>
          <p>
            <center>
              <a href="" style="text-decoration:none; color:white;"><span class="icon-facebook4" id="facebook" style="color: white;"></span></a> 
              <a href=""  style="text-decoration:none; color:white;"><span class="icon-network" id="website" style="color: white;"></span></a> 
              <a href="" style="text-decoration:none; color:white;"><span class="icon-stumbleupon3" id="issuu" style="color: white;"></span></a> 
              <a href="" style="text-decoration:none; color:white;"><span class ="icon-twitter3"></span></a>
              </br>
              <br>
              <br>
              <span style="font-family:'Open Sans',sans-serif; font-size:11px; color:grey;">&copy; 2014. Frederik Wilhelm. All Rights Reserved.</span>
            </center>
          </p>
        </center>
      </div>
    </div>
  </div>
  <!-- FOOTER ENDE --> 

</div>

Мой CSS:

    body {
        font-family: 'Open Sans', sans-serif;
        background-color: #FFF;
        position: center;
        margin: 0;
        padding: 0;
        /*height: 350px; */
    }
    #page1 {
        /*font-family: 'Open Sans', sans-serif;*/
        background-color: #FFF;
        position: center;

    }
    #header1 {
        padding: 5em;
        height: 100px;
        background-color: #FFF;
        background: url(images/myLogo.png) no-repeat scroll transparent;
        background-position: center;
        /*border-bottom: 3px solid #000;*/
        -webkit-box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
        -moz-box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
        box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
    }
    #content {
        padding: 10px;
        padding-bottom: 7em;  /* Höhe des Footers */
    }

    #footer1 {
        position: absolute;
        bottom: 0;
        background: #333;
        height: 7em;        /* Höhe des Footers*/
        width: 100%;
        -webkit-box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
        -moz-box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
        box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
    }
    /***** 2 INHALTSBOXEN *****/
    .wrapper {
        width: 630px;
        margin: 0 auto;
    }
    .left_box {
        float: left;
        padding: 10px;
        width: 290px;
        height: 350px;
        text-align: center;
        border: 2px solid white;
        margin-top: 10px;
    }
    .right_box {
        float: right;
        padding: 10px;
        width: 290px;
        height: 100%;
        text-align: center;
        border: 2px solid white;
        margin-top: 10px;
    }
    .clearer {
        clear: both;
        padding: 1px;
        width: 100%;
        height: 0.5px;
    }

.content-wrapper {
    margin: 0 auto;
    max-width: 1216px;/*padding: 10px;*/
}
.ft-div-left {
    float: left;
}
.ft-div-right {
    float: right;
}
.ft-div-middle {
    text-align: center;
}
li {
    display: block;
    float: left;
}
table {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    font-size: 13px;
}