JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<script src="//cdn.jsdelivr.net/skrollr/0.6.27/skrollr.min.js"></script>
<script src="//cdn.jsdelivr.net/skrollr.menu/0.1.5/skrollr.menu.min.js"></script>
<section data-top-top="opacity:1;" data-top-bottom="opacity:0;"></section>
<section data-top-top="top:0%" data-top-bottom="top:0%"></section>
<section data-top-top="top:100%" data-top-bottom="top:0%"></section>
<section data--200p-top-top="top:100%" data--200p-top-bottom="top:0%"></section>

CSS

html, body {
    height: 100%;
    width: 100%;
}
section {
    text-align: center;
    font-size: 200%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
}

section:nth-child(1) {
    background: red;
    z-index: 5;
}

section:nth-child(2) {
    background: purple;
    z-index: 0;
}

section:nth-child(3) {
    background: teal;
    top: 100%;
    z-index: 10;
}

section:nth-child(4) {
    background: orange;
    top: 100%;
    z-index: 15;
}

JavaScript

var s = skrollr.init();

var setSectionHeight = function() {
    $('section').height( $(window).height() );
}

setSectionHeight();
$(window).resize(function(){
    setSectionHeight();
    s.refresh();
});