JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="fixed_position">
        <div class="relative_layer">Layer</div>
    </div>
    <div class="content"></div>
    <div class="clear"></div>
</div>

CSS

.wrap {
    width:500px;
    height:500px;
    background-color:#eeeeee;
    position:relative;
    top:0;
    left:0;
    margin:0 auto;
}

.fixed_position {
    float:left;
    width:0;
    height:0;
    position:relative;
    top:0;
    left:0;
}

.relative_layer {
    position:absolute;
    top:0;
    left:-100px;
    z-index:9;
    width:50px;
    height:80px;
    background-color: #3454FF;
    font-size:11px;
    color:#fff;
    text-align:center;
}


.content {
    float:left;
    width:500px;
    height:1000px;
    position:relative;
    top:0;
    left:0;
    background-color:#FF7373;
}
}

.clear {
    clear:both;
}

JavaScript

$(document).on("scroll", window, function(e) {
    var top = $("body").scrollTop();
    $(".relative_layer").animate({top:top},100);
});