JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <header>Hello world!</header>
    <table>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
    </table>
</div>

CSS

body {
    background: linear-gradient(white, black)
}
header {
    position: fixed;
    font-size: 72px;
    width: 480px;
}
td {
    border: 1px solid black;
    width: 200px;
    height: 200px;
}

JavaScript

$(function() {
    function updateGradient() {
        var header = $('header');
        var top = $(window).scrollTop();
        var bottom = header.outerHeight() + top;
        var totalHeight = $('#container').height();
        top = Math.round(255 * (1 - top / totalHeight));
        bottom = Math.round(255 * (1 - bottom / totalHeight));
        var gradient = 'linear-gradient(rgb(' + top + ',' + top + ',' + top + '), rgb(' + bottom + ',' + bottom + ',' + bottom + '))';
        header.css('background', gradient);
    }
    $(window).scroll(function() {
        updateGradient();
    });
    updateGradient();
});