JSFiddle - React, Tailwind, and code Playground

HTML

<header>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar lectus a magna commodo bibendum. Mauris tempus tempus felis in luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce non libero in nisi eleifend tempus. Maecenas gravida viverra lectus, id lobortis turpis sollicitudin vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse at iaculis elit. Phasellus in elit non lorem vehicula bibendum. Fusce sapien urna, condimentum ac pretium ac, lacinia id diam. Curabitur a mauris at risus feugiat lobortis. In hac habitasse platea dictumst. Nullam ultrices tincidunt arcu sed semper. Morbi hendrerit accumsan pretium. Nulla auctor tincidunt lorem non fermentum. Fusce tincidunt ultrices nisl, at imperdiet nulla porttitor quis.</header>

<div id="sticky">Aliquam quis enim nisi. Aenean ipsum eros, vestibulum sit amet consequat et, elementum ac est. Ut eros sem, condimentum non dignissim in, suscipit vitae leo. Morbi vitae lacus felis, nec sagittis augue. Maecenas mi felis, ultrices eu placerat sed, tincidunt iaculis augue. Etiam gravida venenatis arcu id elementum. Nullam suscipit elit dolor, vitae tempor neque.</div>

<div id="wrapper">
    <p>Fusce non risus et dui consectetur ornare. Morbi blandit blandit nisi, vitae porta velit luctus nec. Suspendisse interdum accumsan erat volutpat molestie. Morbi eget porta lorem. Nunc varius ligula non felis hendrerit suscipit. Nam lacinia, dui sit amet aliquet ultrices, ipsum metus luctus erat, in facilisis lacus arcu sit amet erat. Phasellus at libero purus. Nulla vel ultrices nulla. Pellentesque malesuada pharetra neque, ac consectetur odio lobortis id. Cras accumsan ipsum quis massa tincidunt fringilla. Nulla tincidunt quam sit amet massa interdum auctor. Donec luctus dapibus risus, ac pretium ante pretium vitae. Aliquam in cursus ante. Nunc porttitor iaculis tincidunt.</p>
    
    <p>Nullam vehicula...

CSS

#wrapper {
    width: 80%;
}

header, p {
    text-align: justify;
    margin-bottom: 1em;
}

header {
    background: rgb(255, 200, 200);
}

#wrapper {
    background: rgb(200, 255, 200);
}

#sticky {
    position: absolute;
    right: 0;
    
    background: rgb(200, 200, 255);
    
    width: 18%;
}

JavaScript

var $sticky = $('#sticky');
var $header = $('header');

$(window).scroll(function() {
		console.log($(this).scrollTop());
    if ($(this).scrollTop() > $header.offset().top + $header.height()) {
        $sticky.css({
            top: 0,
            position: 'fixed'
        });
    } else {
        $sticky.css({
            top: 'auto',
            position: 'absolute'
        });
    }
}).trigger('scroll');