JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>

    <meta charset="utf-8" />

    <link href="_styles/main.css" rel="stylesheet" type="text/css">
 
    <script src="../ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="_scripts/main.js"></script>
    
</head>

<body>

    <section class="outer_area" id="one">
        <div class="fixed">
            <article class="inner_area">
                <h1>HERE COMES THE MENU</h1>
            </article>
        </div>
    </section>
    
    <section class="outer_area" id="two">
        <div class="fixed">
            <article class="inner_area">
                <h1>HERE COMES THE MENU</h1>
            </article>
        </div>
    </section>

</body>

</html>

CSS

*{margin: 0px;padding: 0px;border: none;outline: none;text-decoration: none;list-style: none;}

.outer_area{
    width: 100%;
    margin: auto;
    height: 500px;
    position: relative;
}

.inner_area{
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 500px;
}

.fixed{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 500px;
    clip:rect(0px,1200px,800px,0px);
}

.inner_area h1{
    font-size: 60px;
    font-family: Arial Black;
    font-style: bold;
}
#one{ background-color: white; color: black; z-index: 2;}
#two{ background-color: black; color: white; z-index: 1;}

JavaScript

function sticky( jqsec ){
    this.cont  = jqsec;
    this.bound = this.cont.parent();
    this.inner = this.cont.find('article');
    var s      = this;
    this.arrow = $('#'+(this.bound.attr('id'))+'_arrow');
    
    this.height = function(){ return parseInt( s.cont.css('height') ); };
    this.top    = function(){ return parseInt( s.bound.offset().top ); };
    this.bot    = function(){ return (s.top() + s.height());  }
    
    this.scroll = function(p){ 
        var r  = 'rect(0px,'+(window.innerWidth)+'px,'+(this.bot()-p)+'px,0px)';
        this.cont.css('clip',r);
        var ar = 'rect(0px,'+(window.innerWidth)+'px,'+((p-this.bot())*-1)+'px,0px)';
        this.arrow.css('clip',ar);
    }
    
    this.resize = function(){
        if(this.bound.attr('id') == 'five'){
            var c = 0;
            $('#project_list').find('ul').find('li').each(function(){
                c += parseInt( $(this).height() ) + 10;
            });
            c += 40;
            
            this.bound.css({
                "width"       : window.innerWidth+'px',
                "height"      : c+'px',
                "line-height" : c+'px',
            });
            this.cont.css({
                "width"  : window.innerWidth+'px',
                "height" : c+'px',
            });

            return;
        }
        this.bound.css({
            "width"       : window.innerWidth+'px',
            "height"      : window.innerHeight+'px',
            "line-height" : window.innerHeight+'px',
        });
        this.cont.css({
            "width"  : window.innerWidth+'px',
            "height" : window.innerHeight+'px',
        });

        var p = (document.body.scrollTop) ? document.body.scrollTop : (-1 * $('html').offset().top);
        this.scroll(p)
    }
}

var stickies = Array(), popouts = Array(), fp;
$(document).ready(function(){
    $('.fixed').each(function(){
        stickies.push( new sticky( $(this) ) );
    });
    
    $(window).scroll(function(){
     ...