JSFiddle - React, Tailwind, and code Playground

by victorxpp

HTML

<div id="resourceChart">
    <div id="mainSuperContainer">
        <div class="leftPart ui-resizable sticky">
            <div class="header"></div>
            <div class="item parent">
                <div style="float:left;" class="leftcollapse toggleMinus"></div>John Smith</div>
            <div class="item child" style="display: block;">My Work</div>
            <div class="item child" style="display: block;">My Second Work</div>
            <div class="item parent">
                <div style="float:left;" class="leftcollapse toggleMinus"></div>Bob Doe</div>
            <div class="item child" style="display: block;">My Work</div>
            <div class="item child" style="display: block;">Activity2</div>
            <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
        </div>
        <div class="gantMainControl " id="gantControl">
            <div id="gantHeader" class="header stickyv">
                <div class="headerRow">
                    <div class="headerRowYear" id="headerYear">
                        <div class="headerCellYear" style="width:547px">2013</div>
                    </div>
                </div>
                <div class="headerRow">
                    <div class="headerCellMonth" style="width:46px">J</div>
                    <div class="headerCellMonth" style="width:42px">F</div>
                    <div class="headerCellMonth" style="width:46px">M</div>
                    <div class="headerCellMonth" style="width:45px">A</div>
                    <div class="headerCellMonth" style="width:46px">M</div>
                    <div class="headerCellMonth" style="width:45px">J</div>
                    <div class="headerCellMonth" style="width:46px">J</div>
                    <div class="headerCellMonth" style="width:46px">A</div>
                    <div class="headerCellMonth" style="width:45px">S</div>
                    <div class="headerCellMonth" style="width:46px">O</div>
                   ...

CSS

html {
    background-color: #FFFFFF;
    color: #333;
    font-size: .85em;
    font-family:"Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

#mainTimelineContainer{
    padding-top:42px;
}
#mainSuperContainer {
    width:900px;
    
    position:relative;
}
.sticky {
    position:absolute;
    left:0;
    top:5;
}
.stickyv {
    position:absolute;
    left:0;
    top:5;
}
#resourceChart {
    width:600px;
    height:150px;
    overflow:auto;
}
.leftPart {
    width:200px;
    float:left;
    z-index:2;
}

.toggleExpand {
    background-image: url(../../../Images/Icons/plus.png);
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.leftPart .item {
    background-color:white;
    border:1px lightblue solid;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    gantHeader width:194px;
    margin-top:-1px;
    height: 23px;
    padding-left: 5px;
}
.leftPartselector {
    width: 30px;
    float: left;
}
.leftPartselector .header {
    background-color:white;
    border:1px lightblue solid;
    display:inline-block;
    width:24px;
    height: 39px;
    padding-left: 5px;
    vertical-align: middle;
}
.leftPartselector .item {
    background-color:white;
    border:1px lightblue solid;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:24px;
    margin-top:-1px;
    height: 23px;
    padding-left: 5px;
}
.leftPart .child {
    text-indent: 20px;
}
.gantMainControl {
    padding-left:200px;
}

.gantMainControl .headerRow {
    display: inline-block;
    white-space: nowrap;
    height: 21px;
}
.gantMainControl .headerRow .headerCellMonth {
    margin-right:-2px;
    margin-top: -1px;
    background-color:white;
    display:inline-block;
    border:1px solid lightblue;
    text-align:center;
}
.gantMainControl .headerRow .headerCellYear {
    background-color:white;
    display:inline-block;
    border:1px solid lightblue;
    text-align:center;
    margin-right:-1px;
}

JavaScript

$('#resourceChart').scroll(function () {
    $(this).find('.sticky').css('left', $(this).scrollLeft());
});

$('#resourceChart').scroll(function () {
    $(this).find('.stickyv').css('top', $(this).scrollTop());
});