Scroll Divs Overlay to Top

Question

I need to do an overlay of Divs such as this, stopping the scroll at the top of the page and come the other over.

http://jsfiddle.net/8b3ae5re/1/

But I can’t create a page doing this. Someone can help me??

Thanks in advance :)

Answer 1

Put a fixed div on top and the div that will overlap with z-index higher

CSS

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

html, body{
    height: 100%;
}

h1,h2{
    color:#ccc;
    display: block;
    text-align: center;
}

.div1 {
    background-color:blue;
    z-index: 1;
    position:fixed;
    height: 100%;
    width: 100%;
    top:0px;
    margin-top: 0;
}

.div2{
    height: 100%;
    background-color: red;
    position: relative;
    z-index: 2;
    margin-top: 100vh;
}

<div class="div1">
	<h1>Conteudo div1</h1>
</div>
<div class="div2">
	<h2>Conteudo div2</h2>
</div>

I found a jsfiddle

$(function() {

    // Set up vars
    var _window = $(window),
        panels = $('.panel'),
        panelsY = [];

    // Cache position of each panel
    $.each(panels, function(i, el) {
        panelsY.push(panels.eq(i).offset().top);
    });

    // Bind our function to window scroll
    _window.bind('scroll', function() {
        updateWindow();
    });

    // Update the window
    function updateWindow() {
        var y = _window.scrollTop();

        // Loop through our panel positions
        for (i = 0, l = panels.length; i < l; i++) {
            /* 
                Firstly, we break if we're checking our last panel,
                otherwise we compare if he y position is in between
                two panels
            */
            if ((i === l - 1) || (y >= panelsY[i] && y <= panelsY[i+1])) {
                break;
            }
        };

        // Update classes
        panels.not(':eq(' + i + ')').removeClass('panel-fixed');
        panels.eq(i).addClass('panel-fixed');
    };

});

html, body {
    height: 100%;
    }

.panel {
    position: relative;
    min-height: 500px;
    z-index: 5;
    }
    .panel-fixed {
        z-index: 1;
        }
    .panel-inner {
        padding: 1em;
        width: 100%;
        }
        .panel-fixed .panel-inner {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2;
            }

.panel-one {
    background-color: red;
    }

.panel-two {
    background-color: blue;
    }

.panel-three {
    background-color: green;
    }

/* Base */
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body {
    font: 100%/1.5 Arial, sans-serif;
    }

h1, h2, h3 {
    margin-bottom: 1.5em;
    font-weight: bold;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="panel panel-one">
    <div class="panel-inner">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
    </div>
</div>

<div class="panel panel-two">
    <div class="panel-inner">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
    </div>
</div>

<div class="panel panel-three">
    <div class="panel-inner">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
    </div>
</div>