javascript - 使页面的第一部分保持在顶部

Question

在我的页面上有两个部分，一个标题 div 和一个内容 div。我希望 JS 或 jquery 解决方案将标题部分粘贴在顶部，以便当用户滚动时内容部分会交叉并覆盖标题部分。

html:

<div id="header">
    <h3>I'd like to stick here at the background, please! </h3>
</div>
<div id="content">
    <h3>I'd like to cross over the header when user scrolls.</h3>
</div>

http://jsfiddle.net/KNh46/

Answer 1

更新:被误解了，因此您希望内容滚动到标题上方，而不是下方。那么它应该是这样的:

#header {
    position: fixed;
    height: 100px;
    top: 0;
    z-index: 100;
}

#content {
    position: relative;
    margin-top: 100px;
    z-index: 101;
}

请在此处查看示例:http://jsfiddle.net/aorcsik/v7zav/

---

如果你的页眉是固定高度的，比如说 100px，那么:

#header {
    position: fixed;
    height: 100px;
    top: 0;
}

#content {
    margin-top: 100px;
}

这样当滚动到顶部时，标题不会覆盖内容，但当您开始向下滚动时，它会。