JSFiddle - React, Tailwind, and code Playground

HTML

<div class="moving-article">

    <div class="container">
        <header class="fixed-header">FIXED HEADER</header>
        <ul>
        <li>SCROLL</li>
        <li>SCROLL</li>
        <li>SCROLL</li>
        </ul>    
    </div>
</div>

<div class="unmoving-article">
<header class="unfixed-header">UNFIXED HEADER</header>
    <div class="container">
        <ul>
        <li>SCROLL</li>
        <li>SCROLL</li>
        <li>SCROLL</li>
        </ul>    
    </div>
</div>

<div class="unmoving-article">
<header class="unfixed-header">UNFIXED HEADER</header>
    <div class="container">
        <ul>
        <li>SCROLL</li>
        <li>SCROLL</li>
        <li>SCROLL</li>
        </ul>    
    </div>
</div>

<div class="unmoving-article">
<header class="unfixed-header">UNFIXED HEADER</header>
    <div class="container">
        <ul>
        <li>SCROLL</li>
        <li>SCROLL</li>
        <li>SCROLL</li>
        </ul>    
    </div>
</div>

<div class="unmoving-article">
<header class="unfixed-header">UNFIXED HEADER</header>
    <div class="container">
        <ul>
        <li>SCROLL</li>
        <li>SCROLL</li>
        <li>SCROLL</li>
        </ul>    
    </div>
</div>

CSS

/* the important bit: if you apply the transform, all the headers positions will be relative to the container but (with the exception of IE11) they stop behaving as fixed.

interestingly, the fixed elements when scrolled inside the transformed parent go over the border of the containing block, behaving as it's box sizing was set to border box. but if you give them top and left properties, they will still be related to the content box.

lastly, removing top and left properties from header will set their position to auto, which is the same they would have as absolute.    */

.moving-article {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);   
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
}




/* IGNORE BELOW CSS - JUST FOR PRESENTATION */

* { 
    margin: 0;
    padding: 0;
}
body {
    font-family: 'arial', cursive;
    color: #fff;
 }
.moving-article {
  -webkit-font-smoothing: subpixel-antialiased; /* avoid font get thinner */
  border: solid 10px #fff;
  height: 150px;
  overflow: scroll;
  position: relative;
  width:50%;
}

.unmoving-article {
  -webkit-font-smoothing: subpixel-antialiased; /* avoid font get thinner */
  border: solid 10px #fff;
  height: 150px;
  overflow: scroll;
  position: relative;
  width:50%;
}

.fixed-header {
background: rgba(0,0,0,0.5);
width: 100%;
text-align: center;
line-height: 40px;
}
.container{
    width:800px;
}
li { 
  background: #7081FF;
  min-height: 100px;
  text-align: center;
  vertical-align: middle;
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  } 
li:nth-of-type(2) {
  background: #434d99;  
}