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').on('wheel', function(e) {

    if (e.originalEvent.deltaY > 0) {
        $(this).stop().animate({
            top: '-100%'
        }, 700, 'linear');
    }
});

$('.container').on('wheel', function(e) {

    if (e.originalEvent.deltaY < 0  && $(this).scrollTop() < 10) {
        $('.frontpage').stop().animate({
            top: 0
        }, 700, 'linear');
    }
});