Divs Overlay with Scroll to the top

Question

Divs Overlay with Scroll to the top

Navigation

#1 by (0 votes)

-2

I need to make an overlap of divs such as this, to stop the scroll at the top of the page and to come to another one on top.

link

But I can not seem to get a page to do this. Can someone help me ??

Thanks in advance!)

javascript style

asked by anonymous 23.09.2017 / 21:12

1 answer

What does the following line in R do? [closed] How to select matrix positions / random draw? [closed]

score 0 · Answer 1

Place a fixed div at the top and the div that will overlap with a larger z-index

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><divclass="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>