JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll-container">
    <div class="container">
        <h1>Header</h1>
    </div>
</div>

CSS

.scroll-container {
    position: relative;
    height: 300px;
    overflow-y: scroll;
}

.container {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 1000px;
    position: relative;
    overflow: auto;
}

h1 {
    position: absolute;
    margin: 0;
    width: 100%;
    background: black;
    color: white;
}

JavaScript

$(function () {
    var $header = $('h1'),
        $container = $('.container'),
        $scrollContainer = $('.scroll-container'),
        scrollContainerOffset = $scrollContainer.offset().top;
    
    $scrollContainer.on('scroll', function () {
        var topPosString = 'translate3d(0, ' + Math.max(0, $container.offset().top * -1 + scrollContainerOffset) + 'px, 0)';
        $header.css({
            'transform': topPosString,
            '-ms-transform': topPosString,
            '-moz-transform': topPosString,
            '-webkit-transform': topPosString
        });
    });
});