这是我的工作示例:http:
//jsfiddle.net/UGhKe/2/
CSS
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: 5em;
}
.content {
position: absolute;
top: 5em;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
HTML
<div id="body">
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
当您滚动顶部时,我希望内容位于标题下方(但当您向下滚动时隐藏在标题下方) - 这很好用......
但是我需要删除top: 5em并使用类似“继承标题的当前高度”之类的东西——没有 JS 是否可能?
如果没有 JS 真的不行,那么我可以只使用 JS,但我宁愿尝试在纯 CSS 中找到解决方案。
编辑:
我应该注意,我不能使用top: 5em的原因是因为标题没有固定的高度 - 将在文本内部使用图像(用于徽标),并将其设置为最大宽度: 100% 以便它缩小到适合 iPhone 的宽度,并且不会在 iPad 上扩展太多。