JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div id="page">
    <p class="pageHeader">PAGE HEADER</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet. Donec eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius enim ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>

    <p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>

    <p>Sed vehicula viverra faucibus. Morbi faucibus sem sit amet tempus sagittis. Aliquam semper posuere metus, id malesuada magna accumsan in. Suspendisse ut mattis ipsum, bibendum fermentum arcu. Donec facilisis blandit libero in venenatis. Donec mattis est mi, vitae faucibus felis scelerisque in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce laoreet nisl ac tempor venenatis. Quisque lobortis nunc sed massa suscipit, vitae commodo justo molestie.</p>

    <p>Aenean rutrum eros a mauris eleifend lobortis. Curabitur id est tortor. Quisque posuere tristique leo eu varius. Mauris at nulla massa. Mauris...

CSS

body {
    position: relative;
    margin: 0 auto;
}

#page {
    position:relative;
    width: 550px;
}

#page p {
    text-align: justify;
}

#block {
    background: #027EBA;
    display: block;
    width: 200px;
    height: 100%;
    position: fixed;
    right: 20px;
    top:0;
    overflow: hidden;
}

.pageHeader, .pageFooter {
    display: block;
    width: 100%;
    margin: 0 auto;
    background: red;
    color: white;
    font-weight: bold;
    font-size: 16px;
}

.blockHeader, .blockFooter {
    display: block;
    width: 100%;
    margin: 0 auto;
    background: green;
    color: white;
    font-weight: bold;
    font-size: 16px;
}

JavaScript

$(window).scroll(function() {
        var pageH = $('#page').height() - $(this).height();
        var pageT = this.scrollY - $('#page').offset().top;
        
        $('#block').scrollTop(pageT / pageH * ($('#blockLength').height() - $(this).height()));
    });