2

上部に2つの固定div（div1とdiv2）があり、下部に自然に流れるページコンテンツを持つ1つのdiv（div3）があるページを作成しようとしています。ユーザーがスクロールしてdiv3がdiv1の一番下に到達したら、2つのdivを融合させて、通常どおりスクロールします。このWebサイトは、私が複製しようとしている動作とまったく同じです。

div1とdiv3をdiv2より上に保つために異なるzインデックスを使用しており、div1とdiv3がタッチしたときに検出されます。

$(window).scroll(function(e) {
    var calc = $("#div3").offset().top - $("#div1").height();
    if ($(this).scrollTop() >= calc) 
    {
        //fuse
    }
    else
    {
        //unfuse
    }
});

しかし、div3とdiv1を融合する方法がわかりません。

ありがとう ：）

4

1 に答える 1

0

これが1つの解決策です。に依存し.header、.content-inner内にあります.content。は、スクロールのしきい値に達するまで.header表示されます。このしきい値に達すると、クラスが追加されて元に戻り、ページの通常のフローに戻ります。position:fixed.content.headerposition:static

.content-inner静的ポジショニングに戻るmargin-topときにスペースを空けるためにを減らす必要があるため、必要でした。.header

jsFiddle

HTML

<div class="banner"></div>
<div class="content">
    <div class="header"></div>
    <div class="content-inner">
        ...
    </div>
</div>

CSS

body,
html {
    margin:0;
    padding:0;
}

.banner {
    position:fixed;
    z-index:-1;
    left:0;
    right:0;
    top:100px;
    height:300px;
    background-color:#F00;
}

.content {
    margin-top:400px;
    background-color:#FFF;
    position:relative;
}
.content.fuse {
    margin-top:300px;
}

.content-inner {
    background-color:#FFF;    
}

.header {
    position:fixed;
    height:100px;
    background-color:#00F;
    left:0;
    top:0;
    right:0;
}

.content.fuse .header {
    position:static;
}

JS

$(window).scroll(function(e) {
    if ($(window).scrollTop() < 300)
        $('.content').removeClass('fuse');
    else
        $('.content').addClass('fuse');
});
于 2013-03-22T15:22:28.957 に答える