Javascript 使页面的第一部分粘在顶部

在我的页面上有两个部分，一个header div和contents div。我希望JS或jquery解决方案将header部分粘贴在顶部，这样当用户滚动时，contents部分将穿过并覆盖header部分

html:

我想呆在这里的背景，请！
当用户滚动时，我想越过标题。

您应该添加css：

*{margin:0;padding:0}
#header{
    position:fixed;
    width:100%;
    height:200px;
    background:#ccc;
}
h3{
    text-align:center;
}

#content{
    background:#f1f1f1;
    padding-top:200px;
    min-height:500px;
}

您应该添加css：

*{margin:0;padding:0}
#header{
    position:fixed;
    width:100%;
    height:200px;
    background:#ccc;
}
h3{
    text-align:center;
}

#content{
    background:#f1f1f1;
    padding-top:200px;
    min-height:500px;
}

---

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

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

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

请参见此处的示例：

---

如果您的收割台高度固定，请说

100px

，然后：

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

#content {
    margin-top: 100px;
}

---

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

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

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

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

请参见此处的示例：

---

如果您的收割台高度固定，请说

100px

，然后：

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

#content {
    margin-top: 100px;
}

---

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

如果我理解您的问题，类似这样的内容：

<div id="content_wrapper" style="position:relative">
    <div id="header" style="z-index:1; position:absolute; top:0px">
        <h3>I'd like to stick here at the background, please! </h3>
    </div>
    <div id="content" style="z-index:5">
        <h3>I'd like to cross over the header when user scrolls.</h3>
    </div>

</div>

我想呆在这里的背景，请！
当用户滚动时，我想越过标题。

如果我理解你的问题，可以这样说：

<div id="content_wrapper" style="position:relative">
    <div id="header" style="z-index:1; position:absolute; top:0px">
        <h3>I'd like to stick here at the background, please! </h3>
    </div>
    <div id="content" style="z-index:5">
        <h3>I'd like to cross over the header when user scrolls.</h3>
    </div>

</div>

我想呆在这里的背景，请！
当用户滚动时，我想越过标题。

我在我的项目中使用，没有任何问题。ScrollToFixed允许您根据滚动位置设置何时固定div

随便举个例子：jsfiddle.net/ZczEt/167/

我在我的项目中使用它，没有任何问题。ScrollToFixed允许您根据滚动位置设置何时固定div

---

摆弄示例：jsfiddle.net/ZczEt/167/

我自己提出了另一个解决方案：

将另一个容器div添加到标题中，然后将该div定位为fixed，并将内容设置为绝对值。但通过这种方式，您需要为标题指定最小高度或高度：

---

我自己提出了另一个解决方案：

将另一个容器div添加到标题中，然后将该div定位为fixed，并将内容设置为绝对值。但通过这种方式，您需要为标题指定最小高度或高度：

---

是否将

margin top

起作用？…我认为“padding top”可能会更好。对我来说，检查小提琴，查看滚动版本：和滚动版本：将

margin top

起作用？…我认为“padding top”可能会更好。对我来说，检查小提琴，对于滚动版本：和滚动版本：我知道固定位置，您看到JSFIDLE了吗？我希望在页面加载时有精确的布局，但是当用户开始滚动时，页眉是固定的，contents div startrs覆盖页眉。我知道固定的位置，你看到JSFIDLE了吗？我希望在页面加载时有精确的布局，但是当用户开始滚动时，页眉会固定在那里，contents div startrs会覆盖页眉。