Scroll a div over another div

Question

I want to make my divs scroll over each other, without them scrolling upwards out of the screen.

I managed this with two divs, but can't manage to do the same with the third.

I made an example on jsFiddle: http://jsfiddle.net/gv8GU/ So it works when you do this:

#one{
    width: 100%;
    height: 800px;
    position: fixed;

    background: gold;
}

#two{
    width: 100%;
    height: 800px;
    top: 800px;
    position: relative;

    background: goldenrod;
}

#three{
    width: 100%;
    height: 200px;
    top: 800px;
    position: relative;

    background: darkgoldenrod;
}

But this only works for the first two divs.

So when the second div (#two) is scrolled all the way to the top and you scroll further, I want that second div to stay at the top, scrolling the third div(#three) over the second.

Answer 1

Sorry about the duff answer - I saw the "Parallax" tag and got excited.

I think that I understand what you want - basically as each "zone" comes to the top, it latches there and the next zone encroaches from the bottom.

I think that the answer is in switching to position fixed at top,left zero when the div positions cross the top. Perhaps employ a "latched" class when they need to get sticky.

As far as I know CSS can't do what you want - it would need a way of responding to the scroll position, so it's a Javascript solution.

I haven't got time to write code just now, but you'll need an initialisation routine that stores the original locations of the divs. When scroll position changes, you'll need to compare that to the original positions of each div to determine when divs should be shown fixed vs. in-flow.

You'll also need some method of reserving the vertical space when divs become fixed, because they won't take up any space. Try floating left a zero width div of the appropriate height, clearing it after the content div.

Sorry that I couldn't refine this further.

P.S. Worked it out on jsfiddle, http://jsfiddle.net/xtyus/1/

THE HTML

<!-- 1. Items that are not in fixed position * latched * scroll normally -->
<!-- 2. Items that go above the scroll position are given .latched -->
<!-- 3. If they scroll down again, they lose .latched -->
<!-- 4. div.spacer included to pad out space when content sections become latched -->

<div class="spacer"></div>
<div class="one">
    <h2>ONE</h2>
    <p>Lorem ipsum</p>
</div>
<div class="spacer"></div>
<div class="two">
    <h2>TWO</h2>
    <p>Lorem ipsum</p>
</div>
<div class="spacer"></div>
<div class="three">
    <h2>THREE</h2>
    <p>Lorem ipsum</p>
</div>
<div class="spacer"></div>
<div class="four">
    <h2>FOUR</h2>
    <p>Lorem ipsum</p>
</div>
<div style="clear: both"></div>
<div style="height: 1000px"></div>

THE CSS

.container {
    background: black;
    position: relative;
}
.spacer {
    width: 0;
    height: 600px;
    float: left;
     clear: both;
}
.one { background:red; width: 100%; height: 600px; position: relative; float: left; }
.two { background: blue; width: 100%; height: 600px; position: relative; float: left; }
.three { background: green; width: 100%; height: 600px; position: relative; float: left; }
.four { background: yellow; width: 100%; height: 600px; position: relative; float: left; }
.latched { position: fixed; top: 0; left: 8px; right: 8px; width: auto; }

THE JAVASCRIPT (tested with jQuery 1.9.1)

(function($){
    /* Store the original positions */
    var d1 = $('.one');
    var d1orgtop = d1.position().top;
    var d2 = $('.two');
    var d2orgtop = d2.position().top;
    var d3 = $('.three');
    var d3orgtop = d3.position().top;
    var d4 = $('.four');
    var d4orgtop = d4.position().top;

    /* respond to the scroll event */
    $(window).scroll(function(){
        /* get the current scroll position */
        var st = $(window).scrollTop();

        /* change classes based on section positions */
        if (st >= d1orgtop) {
            d1.addClass('latched');
        } else {
            d1.removeClass('latched');
        }
        if (st >= d2orgtop) {
            d2.addClass('latched');
        } else {
            d2.removeClass('latched');
        }
        if (st >= d3orgtop) {
            d3.addClass('latched');
        } else {
            d3.removeClass('latched');
        }
        if (st >= d4orgtop) {
            d4.addClass('latched');
        } else {
            d4.removeClass('latched');
        }
    });

})(window.jQuery);

Mark

Answer 2

Ages late, but using ScrollMagic would be a better way to make this happen. Check out their scrollwipes section: http://scrollmagic.io/examples/basic/section_wipes_natural.html

The basic idea is that you create full screen sections, put them into a scrollMagic scene and use setPin(el) to animate them into place.

<section class="panel blue">
    <b>ONE</b>
</section>
<section class="panel turqoise">
    <b>TWO</b>
</section>
<section class="panel green">
    <b>THREE</b>
</section>
<section class="panel bordeaux">
    <b>FOUR</b>
</section>

<script>
    $(function () { // wait for document ready
        // init
        var controller = new ScrollMagic.Controller({
            globalSceneOptions: {
                triggerHook: 'onLeave'
            }
        });

        // get all slides
        var slides = document.querySelectorAll("section.panel");

        // create scene for every slide
        for (var i=0; i<slides.length; i++) {
            new ScrollMagic.Scene({
                    triggerElement: slides[i]
                })
                .setPin(slides[i])
                .addIndicators() // add indicators (requires plugin)
                .addTo(controller);
        }
    });
</script>