这是我的结构：
+-----------------------------------------------------------------------+
| |
| header {position: fixed;} |
|_______________________________________________________________________|
| |
| title1 | title2 | title3 |
| |
| |
| |
| tile1: here is a explanation ... |
| |
| |
| title2: here is a explanation ... |
| |
| |
| title3: here is a explanation ... |
| |
+-----------------------------------------------------------------------+
这是我的代码：
<div id = "header">header</div>
<a href="#title1">title1</a>
<a href="#title2">title2</a>
<a href="#title3">title3</a>
<div id="title1">tile1: here is a explanation ...</div>
<div id="title2">tile2: here is a explanation ...</div>
<div id="title3">tile3: here is a explanation ...</div>
现在当我点击title1 （链接）时，相关的div会显示在页面顶部的标题下面（因为标题已修复）
这是我的输出：（当我点击title1时）
+-----------------------------------------------------------------------+
| |
| header {position: fixed;} |
|_______________________________________________________________________|
| title2: here is a explanation ... |
| |
| |
| title3: here is a explanation ... |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+-----------------------------------------------------------------------+
虽然我想要这个输出：
+-----------------------------------------------------------------------+
| |
| header {position: fixed;} |
|_______________________________________________________________________|
| title1: here is a explanation ... |
| |
| |
| title2: here is a explanation ... |
| |
| |
| title3: here is a explanation ... |
| |
| |
| |
| |
| |
| |
+-----------------------------------------------------------------------+
我该怎么做？
修改
这是我的fiddle。
答案 0 :(得分：2)
你需要用div包装你的内容并固定位置而不诉诸JS：
HTML：
<div id="header">header</div>
<div id="content">
<ul class="nav">
<li><a href="#title1">title1</a></li>
<li><a href="#title2">title2</a></li>
<li><a href="#title3">title3</a></li>
</ul>
<div id="title1">tile1: here is a explanation ...</div>
<div id="title2">tile2: here is a explanation ...</div>
<div id="title3">tile3: here is a explanation ...</div>
</div>
CSS：
#header {
background-color: lightGrey;
padding: 10px;
height: 80px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#content {
background-color: Grey;
position: fixed;
top: 100px;
left: 0;
width: 100%;
bottom: 0;
overflow-y: scroll;
}
为了说明，请看这个小提琴： http://jsfiddle.net/tmvmazdg/3/
答案 1 :(得分：0)
您可能需要通过Javascript处理此问题。
以下是演示如何执行此操作的方法： http://jsfiddle.net/h2020bpn/3/
以下是使用jQuery的示例，因此它可以跨浏览器工作。您可以轻松地重复使用此代码以满足您的目的。
这使用jQuery的.scrollTop() method：
Set the current vertical position of the scroll bar for each of the set of matched elements.
答案 2 :(得分：0)
您可以并且可能应该使用样式进行此操作。
您希望在身体元素的顶部添加填充，等于横幅的高度。然后你需要设置你的横幅坐标，所以它们是相对于HTML元素而不是body元素。
这应该在样式表中，但只是编辑你在那里（假设你的横幅是50px）：
<body style="padding-top: 50px;">
<div id="header" style="position: fixed; top: 0px; left: 0px;>header</div>
...
</body>