JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

<div id="content">
    <div id="leftPane">
        1<br />
        2<br />
        3<br />
        4<br />
        5<br />
        6<br />
        7<br />
        8<br />
        9<br />
        10<br />
        11<br />
        12<br />
        13<br />
        14<br />
        15<br />
        16<br />
        17<br />
        18<br />
        19<br />
        20<br />
        21<br />
        22<br />
        23<br />
        24<br />
        25<br />
        26<br />
        27<br />
        28<br />
        29<br />
        30<br />
        31<br />
        32<br />
        33<br />
        34<br />
        35<br />
        36<br />
        END<br />
    </div>
    <div id="rightPane">
        1<br />
        2<br />
        3<br />
        4<br />
        5<br />
        6<br />
        7<br />
        8<br />
        9<br />
        10<br />
        11<br />
        12<br />
        13<br />
        14<br />
        15<br />
        16<br />
        17<br />
        18<br />
        19<br />
        20<br />
        21<br />
        22<br />
        23<br />
        24<br />
        25<br />
        26<br />
        27<br />
        28<br />
        29<br />
        30<br />
        31<br />
        32<br />
        33<br />
        34<br />
        35<br />
        36<br />
        37<br />
        38<br />
        39<br />
        40<br />
        41<br />
        42<br />
        43<br />
        44<br />
        45<br />
        46<br />
        47<br />
        48<br />
        49<br />
        50<br />
        51<br />
        52<br />
        53<br />
        54<br />
        55<br />
        56<br />
        57<br />
        58<br />
        59<br />
        60<br />
        61<br />
        62<br />
        63<br />
        64<br />
        65<br />
        66<br />
        67<br />
        68<br />
        69<br />
        70<br />
        71<br />
        72<br />
        73<br />
        74<br />
        75<br />
        76<br />
        77<br...

CSS

body {
    margin: 0;
    padding: 0;
}
#content {
    margin: 0;
    padding: 0;
    position: relative;  
}

#leftPane {
    float: left;
    margin: 0;

    position: relative;
    width: 400px;
    background: rgb(255,0,0); /* Old browsers */
    /* gradient */
    background: -moz-linear-gradient(top,  rgba(255,0,0,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,0,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,0,0,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,0,0,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,0,0,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,0,0,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
}

#rightPane {
    margin-left: 400px;
    position: fixed;
    width: 400px;
    background: rgb(0,119,255); /* Old browsers */
    /* gradient */
    background: -moz-linear-gradient(top,  rgba(0,119,255,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,119,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,119,255,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,119,255,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,119,255,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,119,255,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
}

JavaScript

$(document).ready(function(){
    var	doc = $(window);
    $(window).bind('resize', function() {
        $("#rightPane").css('top', (calculateScrollSpeed()));
    });
    
    $(window).bind('scroll', function() {
        $("#rightPane").css('top', (calculateScrollSpeed()));
    });
    
    function calculateScrollSpeed() {
        var leftPaneHeight = $('#leftPane').height();
        var rightPaneHeight = $('#rightPane').height();
        var	browserHeight = $(window).height();
        var leftPaneScrollTop = $(window).scrollTop();
        console.log((browserHeight - rightPaneHeight) / (browserHeight - leftPaneHeight));
        return -$(window).scrollTop() * ((browserHeight - rightPaneHeight) / (browserHeight - leftPaneHeight));
    }
});