JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div id="fixed">mouse wheel over this fixed content</div>
</div>
<div id="container">
   
    <div id="content">Tall Content</div>
    
</div>
<div id="container2">
   
    <div id="content2">Tall Content</div>
    
</div>

CSS

body { }
#container { height: 250px; border: 1px solid blue; overflow: scroll;  }
#container2 { height: 250px; border: 1px solid blue; overflow: scroll;  }
#content { height: 500px; }
#content2 { height: 500px; }
#fixed { 
    position: fixed; 
    right: 0px; 
    height: 100px; 
    width: 200px;
    border: 1px solid red; 
    background: pink;
    pointer-events:auto;
}
#content2 { height: 500; }