Static Header when scrolling - html

Question

I coded a homepage and now I am trying to build a header, which is static like not scrolling with, when content is being scrolled. It should stay at the top while the content goes beneath/under it. I found this solution here, however, it's not working for me as I don' know where to put this code in, because everything I tried didn't work.
Click here for jsfiddle!.
My HTML is:
<!-- #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>
<span class="icon-facebook4" id="facebook" style="color: white;"></span>
<span class="icon-network" id="website" style="color: white;"></span>
<span class="icon-stumbleupon3" id="issuu" style="color: white;"></span>
<span class ="icon-twitter3"></span>
</br>
<br>
<br>
<span style="font-family:'Open Sans',sans-serif; font-size:11px; color:grey;">© 2014. Frederik Wilhelm. All Rights Reserved.</span>
</center>
</p>
</center>
</div>
</div>
</div>
<!-- FOOTER ENDE -->
</div>
My CSS is:
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;
}

Answer 1

Just set it to a fix positioned element.
#header1{
position: fixed;
top: 0;
left: 0;
z-index: 999;
}

Answer 2

Add
position:fixed;
into the header1 part of your css.
you could also do it in the call as
<div id="header1" style="position:fixed">