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定位为fixed，并使内容为绝对值。但是这样你需要为标题指定最小高度或高度：

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/

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

5 个答案: