Scroll Fixed Div Upon Collision

Question

I am trying to create a page with two fixed divs (div1 and div2) at the top and one div (div3) with the page content that flows naturally below. When the user scrolls and div3 reaches the bottom of div1, I want the two divs to fuse together and scroll normally. This website has the exact behavior I'm trying to replicate.

I am using different z-indexes to keep the div1 and div3 above div2, and detected when div1 and div3 touch:

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

But I can't figure out how to fuse div3 and div1 together.

Thanks :)

Answer 1

Here is one solution. It relies on .header and .content-inner within .content. .header is displayed as position:fixed until the scrolling threshold is reached at which time a class is added to .content and .header switches back to position:static so it's back in the regular flow of the page.

.content-inner was necessary because we need to reduce the margin-top to make room when .header goes back to static positioning.

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