0

スクロール時に1つのdivを別のdivとオーバーラップさせようとしています。

私はフィドルを持っています。

私がやりたいのは、スクロール時に#wrapperを#headerとオーバーラップさせることです。

基本的にヘッダーは固定され、ラッパーがそれをオーバーレイします。

スティッキー要素とz-indexはこれを行いますか？

それとももう少し複雑ですか。

私はここに似たようなものを持っていましたが、このフィドルで動作させることはできません（そしてはい、すべてのdiv名を変更します）。

注：スクロールのフェードは、後日取り組む予定です。

アップデート：

html,
body
{
    margin:0;
    width:100%;
}
#header
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:auto;
    background-size:100%;
}
#header img
{
    width:100%;
    display:block;
    z-index:99;
}
#wrapper
{
    width:100%;
    background-color:lightgrey;
    z-index:100;
    position:absolute;
}
#outer
{
    margin:30px auto;
    padding-top:20px;
    position:relative;
    width:90%;
    height:1500px;
    background-color:red;
}
#inner
{
    margin:0 auto;
    width:200px;
    height:250px;
    background-color:lightblue;
    top:20px
}​

HTMLページ：

<!DOCTYPE HTML>
<html lang="en-UK">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="DivTest2.css" />

        <title></title>
    </head>
    <body>
        <script type="text/javascript">

        $(document).ready(function()

            {var header_w=$('#header').height(); ...});

    $('#wrapper').css('margin-top',header_w+'px');

$(window).resize(function()
{
    header_w=$('#header').height();

    $('#wrapper').css('margin-top',header_w+'px');
    });
});
});</script>
    <div id="header">
    <img src="http://davesizer.com/blogs/wp-content/uploads/2010/03/eva_jump.jpg" alt="Dog">
</div>
<div id="wrapper">
    <div id="outer">
        <div id="inner"></div>
    </div>
</div>​

    </body>
</html>
4

2 に答える 2

2

jQueryの使用に問題がない場合：

jQuery

$(document).ready(function()
{
    var header_w=$('#header').height();

    $('#wrapper').css('margin-top',header_w+'px');

    $(window).resize(function()
    {
        header_w=$('#header').height();

        $('#wrapper').css('margin-top',header_w+'px');
    });
});

CSS

html,
body
{
    margin:0;
    width:100%;
}
#header
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:auto;
    background-size:100%;
}
#header img
{
    width:100%;
    display:block;
    z-index:99;
}
#wrapper
{
    width:100%;
    background-color:lightgrey;
    z-index:100;
    position:absolute;
}
#outer
{
    margin:30px auto;
    padding-top:20px;
    position:relative;
    width:90%;
    height:1500px;
    background-color:red;
}
#inner
{
    margin:0 auto;
    width:200px;
    height:250px;
    background-color:lightblue;
    top:20px
}​

デモ

更新しました：

$(document).ready(function()
{
    $('#wrapper').css('margin-top'header_w+'px');

    $(window).resize(function()
    {
        header_w=$('#header').height();

        $('#wrapper').css('margin-top',header_w+'px');
    });
});
于 2012-08-13T17:17:52.727 に答える
1

ヘッダーの位置を固定に設定して、あなたが言ったことを正確に行うことができます。次に、ラッパーに上マージンを追加して、最初にそれを押し下げます。デモ

于 2012-08-13T16:29:38.273 に答える