JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="top">
    Nav
 </div>
   
<div id="bottom">
 <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content5</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content10</p>
     <p>Content</p>
    <p>Content</p>
    <p>Content</p>
 </div>

</body>

CSS

body {
    margin: 0;
    background-image: url("https://i.ibb.co/PDrJKf7/chrissa-giannakoudi-0-QRZk-Whfc-A4-unsplash.jpg");
    background-size: 100% auto;
    background-position: 0% 0;
 }
 
 #top {
    top: 0;
    position: fixed;
    height: 100px;
    width: 100%;
    background-image: linear-gradient(rgba(153, 50, 204, 0.7), rgba(153, 50, 204, 0.75)), url("https://i.ibb.co/PDrJKf7/chrissa-giannakoudi-0-QRZk-Whfc-A4-unsplash.jpg");
    background-size: 100% auto;
    background-position: 0% 0;
    z-index:1;
 }
 
 
 #bottom {
    position: relative;
    top: 100px;
    height: 300px;
    width: 100%;
    background-color: rgba(176, 224, 230, 0.7);
    overflow   : auto;
    overflow-x : hidden;
    overflow-y : auto;

 }

JavaScript

$('document').ready(function(){

$('#bottom').scroll(function(){
var x = $(this).scrollTop();
	$('#top').css('background-position','0% '+parseInt(-x)+'px');
	$('body').css('background-position','0% '+parseInt(-x)+'px');
            });
          });