JSFiddle - React, Tailwind, and code Playground

by Nitin Grover

HTML

<div id="grid"></div>
<div id="content">
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minima eius dicta provident voluptas perferendis adipisci itaque magni ea aperiam rerum rem sequi hic distinctio assumenda saepe libero dolore doloribus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minima eius dicta provident voluptas perferendis adipisci itaque magni ea aperiam rerum rem sequi hic distinctio assumenda saepe libero dolore doloribus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minima eius dicta provident voluptas perferendis adipisci itaque magni ea aperiam rerum rem sequi hic distinctio assumenda saepe libero dolore doloribus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minima eius dicta provident voluptas perferendis adipisci itaque magni ea aperiam rerum rem sequi hic distinctio assumenda saepe libero dolore doloribus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minima eius dicta provident voluptas perferendis adipisci itaque magni ea aperiam rerum rem sequi hic distinctio assumenda saepe libero dolore doloribus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minima eius dicta provident voluptas perferendis adipisci itaque magni ea aperiam rerum rem sequi hic distinctio assumenda saepe libero dolore doloribus.</p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minima eius dicta provident voluptas perferendis adipisci itaque magni ea aperiam rerum rem sequi hic distinctio assumenda saepe libero dolore doloribus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minima eius dicta provident voluptas perferendis adipisci itaque magni ea aperiam rerum rem sequi hic distinctio assumenda saepe libero dolore doloribus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minima eius dicta provident voluptas perferendis adipisci itaque magni...

CSS

#grid{
    position: fixed;
    top: 0;
    width: 100%;
    height: 2000px;
    z-index: 1;
    background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQD7xJyY4McdCgIPLxlpJitOsET4-5hy8zyk6aVru-moiR36E7_');
}
#content{
    position:relative;
    z-index: 2;
}

JavaScript

$(window).bind('scroll', function(e){
    parallax();
});

function parallax(){
    var scrollposition = $(window).scrollTop();
    $("#grid").css('top', (0 - (scrollposition * .2))+ 'px');
}