JSFiddle - React, Tailwind, and code Playground

by Jim Tyranski

HTML

<body>
    <div style="width:5000px;height:1000px;">
        <div id="box1" class="box">
            My position-x is fixed but position-y is scrollable.
        </div>
        <div id="box2" class="box">
            My position-y is scrollable but position-x is fixed.
        </div>
        <div id="box3" class="box">
            My position-x and position-y are both scrollable.
        </div>
    </div>

</body>

CSS

.box {
    position:fixed;
}
#box1 {
    top: 0px;
    left: 120px;
    width: 1000px;
    height: 20px;
    background-color: #FF0000;
    z-index:150;
}
#box2 {
    top: 0px;
    left: 0px;
    width: 120px;
    height: 520px;
    background-color: #00FF00;
    z-index:200;
}
#box3 {
    top: 20px;
    left: 120px;
    width: 1000px;
    height: 500px;
    background-color: #0000FF;
    color: white;
    z-index:100;
}

JavaScript

$(window).scroll(function(){
    var $win = $(window);
    $('#box2').css('top', 0 -$win.scrollTop());
    $('#box1').css('left', 120 -$win.scrollLeft());
    $('#box3').css('left', 120 -$win.scrollLeft());
    $('#box3').css('top', 20 -$win.scrollTop());
});