碰撞时滚动固定 div

Question

我正在尝试创建一个页面，顶部有两个固定 div（div1 和 div2），一个 div（div3），页面内容在下方自然流动。当用户滚动，div3到达div1的底部时，我希望两个div融合在一起并正常滚动。这个website 具有我试图复制的确切行为。

我正在使用不同的 z-index 将 div1 和 div3 保持在 div2 之上，并在 div1 和 div3 触摸时检测到：

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

但我不知道如何将 div3 和 div1 融合在一起。

谢谢:)

Answer 1

这是一种解决方案。它依赖于.content 内的.header 和.content-inner。 .header 显示为 position:fixed 直到达到滚动阈值，此时将一个类添加到 .content 并且 .header 切换回 position:static，因此它又回到了页面的常规流程中。

.content-inner 是必要的，因为当.header 回到静态定位时，我们需要减少margin-top 以腾出空间。

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