JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
        
</div>
<div class="pseudoBody no-scroll">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor enim et libero imperdiet facilisis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla faucibus eros nec arcu egestas lacinia. Etiam eu odio in sem iaculis ornare ornare nec risus. Nullam dapibus eros at diam vestibulum posuere. Cras sollicitudin vestibulum semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras tincidunt tempus tellus, at faucibus est pharetra sit amet.

Sed placerat lectus in nisl rutrum ullamcorper. Quisque quis elit sapien. Etiam tellus tortor, convallis eu imperdiet et, condimentum non felis. Praesent vehicula ullamcorper enim ut bibendum. In congue posuere euismod. Etiam lacinia hendrerit felis sed iaculis. Fusce egestas cursus scelerisque. Praesent pellentesque libero non massa porttitor imperdiet sed ut nunc. Nunc sed quam volutpat mi porta posuere vel ullamcorper lacus. Proin nulla justo, consectetur eget interdum quis, suscipit a erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et quam leo, et dictum lectus. Maecenas sagittis purus vel erat vehicula sit amet accumsan tellus rutrum. Proin a nunc id lorem consequat porta. Phasellus lacus velit, hendrerit in venenatis ac, ornare at eros. Suspendisse sed nunc nulla.

Curabitur in sapien vel ligula ultrices posuere. Donec ipsum purus, dignissim at venenatis sit amet, pretium quis mauris. Ut non mi et eros cursus ornare vel eu augue. Nam ac velit eget magna consequat feugiat. Donec orci dui, fringilla eu vulputate sed, ultricies sit amet ipsum. Sed id iaculis urna. Fusce vulputate pulvinar velit, ac cursus tortor egestas ut. Nam varius gravida neque a viverra. Praesent nibh sem, laoreet eu aliquet vel, laoreet in nisi.

Nunc mollis interdum lorem. Donec elit ligula, condimentum quis ornare at, imperdiet nec sapien. Phasellus ac eros...

CSS

body {
    padding:0;
    min-height: 100%;
    background: green;
}

.header {
    position: absolute;
    top:0; left:0;
    width: 100%; height: 100%;
    background: url(http://www.changethethought.com/wp-content/cesarmoreno1.jpg) no-repeat center 0 fixed;
    background-size: cover;

}

.pseudoBody {
    overflow: hidden;    box-sizing: border-box;    -moz-box-sizing: border-box;
    position: absolute;
    left:0;
    top:100%;
    width:100%;
    background: #3889A3;
    color: #EDEE75;
    height: 100%;
    padding: 40px;    
}

body.scroll {

}
body.no-scroll {

}

.pseudoBody.scroll {
        height: auto;
}
.pseudoBody.no-scroll {

}

JavaScript

/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
 * Licensed under the MIT License (LICENSE.txt).
 *
 * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 * Thanks to: Seamus Leahy for adding deltaX and deltaY
 *
 * Version: 3.0.6
 * 
 * Requires: 1.2.2+
 */

(function($) {

var types = ['DOMMouseScroll', 'mousewheel'];

if ($.event.fixHooks) {
    for ( var i=types.length; i; ) {
        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
    }
}

$.event.special.mousewheel = {
    setup: function() {
        if ( this.addEventListener ) {
            for ( var i=types.length; i; ) {
                this.addEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = handler;
        }
    },
    
    teardown: function() {
        if ( this.removeEventListener ) {
            for ( var i=types.length; i; ) {
                this.removeEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = null;
        }
    }
};

$.fn.extend({
    mousewheel: function(fn) {
        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
    },
    
    unmousewheel: function(fn) {
        return this.unbind("mousewheel", fn);
    }
});


function handler(event) {
    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
    event = $.event.fix(orgEvent);
    event.type = "mousewheel";
    
    // Old school scrollwheel delta
    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
    
    // New school multidimensional scroll (touchpads) deltas
    deltaY = delta;
    
    // Gecko
    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
        deltaY = 0;
        deltaX =...