JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">Page title</div>
<div id="toolbar">[ New ] | [ Open ] | [ Print ]</div>
<div id="test">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales, est at convallis gravida, neque magna eleifend mauris, et scelerisque diam nisl ac est. Ut molestie justo sit amet quam pharetra vestibulum. Sed cursus, est hendrerit commodo ornare, risus ipsum convallis libero, in eleifend elit sem quis mauris. Morbi ultrices dolor congue sapien aliquet fringilla. Nam quis tellus turpis, ac consequat eros. Sed quam urna, vulputate in congue eu, pretium eu tortor. Duis eu augue non quam porttitor vestibulum sit amet sed massa. Donec id urna non libero convallis tempor. Maecenas sit amet metus justo. Sed malesuada, lorem at commodo pharetra, purus odio ornare nisl, at fringilla mi tortor eu velit.
    
    Suspendisse eleifend ultricies metus, nec interdum quam tempor a. Nullam nec blandit lorem. Sed congue malesuada dictum. Praesent consequat tincidunt imperdiet. Aliquam sed ipsum augue. Aliquam sem urna, fermentum eget dictum sit amet, rutrum pharetra quam. In vitae lacus nisi, quis laoreet quam. Duis fringilla tristique lobortis. Maecenas volutpat, metus non tempor laoreet, massa nibh adipiscing nibh, non volutpat risus nisi at turpis. Vivamus sed lobortis nisi. Donec vitae sapien velit. Phasellus lacinia convallis augue id varius. Curabitur sit amet urna eu quam ullamcorper imperdiet nec at tortor. Mauris vitae elit sapien, in imperdiet sem. Aliquam quis eros sit amet nisl dignissim ultricies ac et nisl. Nunc suscipit tincidunt turpis vel auctor. Nullam varius nibh non leo viverra vitae pharetra mi laoreet. Donec scelerisque felis a sapien accumsan sed faucibus sapien consectetur. Ut ac tellus felis, porta vehicula libero.
    
    Fusce ornare, metus feugiat mollis tristique, sem lacus vehicula augue, in blandit velit sem vitae lacus. Curabitur pharetra felis ullamcorper erat blandit eu commodo urna ultricies. Nam mollis aliquam ligula. Ut tristique...

CSS

body {
    height: 1000px;   
}

#toolbar {
    background: yellow;
    position: fixed;
    height: 20px;
    width: 100%;
}

#header {
    height: 100px;
    background: blue;
}

#test {
    margin-top: 20px;
    color: white;
    background: red;
    padding: 10px;
}

JavaScript

// capture starting position of toolbar
var toolbar = $('#toolbar');
var toolbarStart = toolbar.position().top;

$(window).scroll(function() {
    // Determine where the scrollbar should be on scroll
    var pos = toolbarStart - $(this).scrollTop();
    toolbar.css('top', pos > 0 ? pos : 0);
});