스크롤 할 때의 정적 헤더

Question

홈페이지를 코딩했는데 이제는 내용을 스크롤 할 때 스크롤하지 않는 것과 같은 정적 인 헤더를 작성하려고합니다. 콘텐츠가 아래/아래로 이동하는 동안 맨 위에 머물러 있어야합니다. 이 솔루션을 찾았는데 here 그러나이 코드를 어디에 넣을 지 모르겠다는 이유로 저에게 도움이되지 않았습니다. 왜냐하면 내가 시도한 모든 것이 제대로 작동하지 않았기 때문입니다.

jsfiddle!에 대해 here을 클릭하십시오.

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

Answer 1

그냥 수정 위치 요소로 설정합니다.

#header1{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 999; 
} 

Answer 2

당신의 CSS의 HEADER1 부분으로

position:fixed; 

를 추가합니다. 당신은 또한

<div id="header1" style="position:fixed">