JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://brandonaaron.github.io/jquery-mousewheel/jquery.mousewheel.js"></script>
<div id="wrapper">
    <div id="splash">
        <div id="splash-footer">Show content</div>
    </div>
    <div id="content">
        <div id="content-header">Show splash</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit velit non viverra rhoncus. Maecenas id arcu tortor. Suspendisse elit felis, molestie nec augue ac, feugiat placerat velit. Morbi elementum ornare lacus. Fusce adipiscing tristique dictum. Duis tristique facilisis ultricies. Cras et dui eget mauris ullamcorper adipiscing et consectetur lectus. Curabitur convallis commodo nunc, a cursus nulla sagittis sit amet. Duis ut tempor risus, sit amet rutrum nulla. Mauris consectetur tempus sodales. Nam placerat sagittis massa vitae aliquam.
            <br/>Etiam a turpis mi. Nullam eu nunc quam. Morbi et metus tempor, molestie urna quis, fringilla orci. Proin ac dui nec est hendrerit pretium. Maecenas sollicitudin pharetra eros, nec rutrum sapien mattis vel. Praesent interdum purus sapien, vitae bibendum nulla dictum at. Etiam malesuada ligula ut convallis fermentum.
            <br/>Aenean molestie sit amet urna tincidunt volutpat. Mauris eleifend eros nec tortor suscipit, ut tempus orci semper. Donec tincidunt sollicitudin orci, id imperdiet nisl mollis ut. Nunc facilisis suscipit libero nec sollicitudin. Quisque rhoncus massa mauris, ut vehicula lorem iaculis eget. Nam eu adipiscing diam. In malesuada, nibh in commodo ornare, nibh augue placerat dui, et egestas urna arcu non tortor. Quisque quis porta lorem. Nulla nibh mi, cursus eu dolor sed, vulputate laoreet lacus. Cras iaculis porta dui, in ultricies dolor consequat sit amet. Maecenas lobortis, leo ac sagittis mattis, ligula arcu adipiscing dui, eu accumsan est lorem vel turpis. Pellentesque lacus nulla, mollis vitae porta et, eleifend at quam. In fringilla luctus sapien sit amet mollis.
            <br/>Etiam nisl mi,...

CSS

/* css normalized */
 html, body {
    height:100%;
    width:100%;
    overflow:hidden;
}
#wrapper {
    height:100%;
}
#splash {
    position:relative;
    background-color:#cce;
    height:100%;
}
#splash-footer {
    position:absolute;
    bottom:0;
    background-color:#cec;
    width:100%;
}
#content {
    position:relative;
    height:100%;
    overflow:auto;
}
#content-header {
    position:absolute;
    top:0;
    background-color:#ecc;
    width:100%;
}

JavaScript

/* scroll events */
$("#splash").on("mousewheel", function (e) {
    if (e.deltaY <= 0) {
        $('#splash').animate({
            height: 0
        }, 500);
    }
});
$("#content").on("mousewheel", function (e) {
    if (e.deltaY > 0 && $(this).scrollTop() <= 0) {
        $('#splash').animate({
            height: '100%'
        }, 500);
    }
});

/* click events */
$("#splash-footer").on("click", function () {
    $('#splash').animate({
        height: 0
    }, 500);
});
$("#content-header").on("click", function () {
    $('#splash').animate({
        height: '100%'
    }, 500);
});