JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="bg-image">
    </div>
</body>

CSS

body {
            margin: 0px;
            height: 4000px;
        }
        #bg-image {
            position: fixed;
            width: 100%;
            height: 100%;
            background-image: url("http://www.ihd-wallpapers.com/wp-content/uploads/2014/08/Landscape-wallpapers-2.jpg");
            background-size: cover;

            -webkit-transition: -webkit-transform 1s ease-out;
            -moz-transition: -moz-transform 1s ease-out;
            -o-transition: -o-transform 1s ease-out;
            transition: transform 1s ease-out;

            -webkit-transform:translate3d(0px,0px,0px);
            -moz-transform:translate3d(0px,0px,0px);
            -ms-transform:translate3d(0px,0px,0px);
            -o-transform:translate3d(0px,0px,0px);
            transform:translate3d(0px,0px,0px);
        }
        .button {
            width: 100px;
            height: 40px;
            background: white;
            border: 1px solid red;
            margin: 10px;
        }

JavaScript

$(document).ready(function () {
            var el = $("#bg-image")[0];
            var topDistance = -600;
            var topDistance2 = -600;
            var lastScrollTop = 0;
            var doc = document.documentElement;

            window.onscroll = function () {

                var scrollTop = (window.pageYOffset || document.documentElement.scrollTop) - (doc.clientTop || 0);

                // avoid to many screen re-flows especially when the user drags the scrollBar
                if (typeof(lastScrollTop) === "undefined" || scrollTop > lastScrollTop + 10 || scrollTop < lastScrollTop - 10) {

                    var el = document.getElementById("bg-image");
                    var pageSpeed = 1;
                    var topDistance = parseInt(scrollTop / pageSpeed) * -1;


                    if ("transform" in document.body.style) {
                        el.style["transform"] = "translate3d(0px," + topDistance + "px,0px)";
                    }
                    else if ("-webkit-transform" in document.body.style) {
                        el.style["-webkit-transform"] = "translate3d(0px," + topDistance + "px,0px)";
                    }
                    else if ("-moz-transform" in document.body.style) {
                        el.style["-moz-transform"] = "translate3d(0px," + topDistance + "px,0px)";
                    }
                    else if ("-ms-transform" in document.body.style) {
                        el.style["-ms-transform"] = "translate3d(0px," + topDistance + "px,0px)";
                    }
                    else if ("-o-transform" in document.body.style) {
                        el.style["-o-transform"] = "translate3d(0px," + topDistance + "px,0px)";
                    }

                    lastScrollTop = scrollTop;
                }

            };
        });