0

私のページには、ヘッダー div とコンテンツ div の 2 つのセクションがあります。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/

4

5 に答える 5

2

更新：誤解されているため、コンテンツをヘッダーの下ではなくヘッダーの上にスクロールする必要があります。次に、次のようになります。

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

このように、一番上までスクロールすると、ヘッダーはコンテンツをオーバーレイしませんが、下にスクロールし始めると、コンテンツをオーバーレイします。

于 2013-10-30T15:23:57.810 に答える
1

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

于 2013-10-30T15:23:39.157 に答える
1

プロジェクトでhttps://github.com/bigspotteddog/ScrollToFixedを問題なく使用しています。ScrollToFixed を使用すると、スクロール位置に基づいて div をいつ固定するかを設定できます。

例をいじる: jsfiddle.net/ZczEt/167/

于 2013-10-30T15:26:20.377 に答える
1

私があなたの質問を理解していれば、このようなもの：

<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>
于 2013-10-30T15:25:54.747 に答える
0

私自身、別の解決策を思いついた：

別のコンテナー 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/

于 2013-10-30T15:54:11.733 に答える