JSFiddle - React, Tailwind, and code Playground

HTML

<div class="frontpage"></div>
<div class="container">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}
.frontpage {
    position:fixed;
    height:100%;
    width:100%;
    top:0px;
    background-color:yellow;
    background-position:center;
    top:0;
    z-index:2
}
.container {
    position:absolute;
    top:0;
    background-color:blue;
    height:100%;
    width:100%;
    z-index:1;
    overflow:scroll;
}

JavaScript

$(".frontpage").bind('mousewheel', function (e) {
    if (e.originalEvent.wheelDelta / 120 < 0) {
        $(".frontpage").stop(true, true).animate({
            top: "-100%"
        }, 700);
    }
});

$(".container").bind('mousewheel', function (e) {
    if (e.originalEvent.wheelDelta / 120 > 0  && $(".container").scrollTop() < 10) {
        $(".frontpage").stop(false, true).animate({
            top: "0"
        }, 700);
    }
});