滚动时的静态标题 [英] Static Header when scrolling
本文介绍了滚动时的静态标题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我编码了一个主页，现在我试图构建一个标题，当内容滚动时，它是静态的，就像不滚动一样。当内容位于其下方/下方时，它应保持在顶部。我在此处，但是它对我不起作用，因为我不知道将代码放在哪里，因为我尝试的所有内容均无效。
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.
单击此处以获得jsfiddle！。
Click here for 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;">© 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;
}
推荐答案
只需将其设置为修复
#header1{
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
这篇关于滚动时的静态标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
