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;
}

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

Answer 2

你应该添加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;
}

jsfiddle

Answer 3

像这样，如果我理解你的问题：

<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>

Answer 4

我在我的项目上使用https://github.com/bigspotteddog/ScrollToFixed没有问题。ScrollToFixed 允许您根据滚动位置设置 div 何时固定。

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

Answer 5

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

将另一个容器 div 添加到标题中，然后将该 div 定位为固定，并使内容为绝对。但是这样你需要为标题指定一个最小高度或高度：

http://jsfiddle.net/pna54/

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

CSS：

div{margin:0;padding:0}

    h3{
        padding:0;margin:0;
        padding-top: 100px;
        padding-bottom:100px;
        text-align:center;
    }

    #header{
        background:#ccc;
        min-height:200px;
        width:500px;
        position:relative;
    }
    .container{
        position:fixed;
        width:100%;
        max-width:500px;
    }
    #content{

        background:#f1f1f1;
        min-height: 500px;
        position: absolute;
        width:500px;
    }

http://jsfiddle.net/pna54/