JSFiddle - React, Tailwind, and code Playground

by cent cent

HTML

<div class="moving-article">
<header class="fixed-header">FIXED HEADER</header>
<ul>
<li>Scroll Me</li>
<li>Me Too</li>
<li>I want to go up and down</li>
</ul>
</div>

<div class="moving-article">
<header class="fixed-header">FIXED HEADER</header>
<ul>
<li>Scroll Me</li>
<li>Me Too</li>
<li>I want to go up and down</li>
</ul>
</div>

<div class="moving-article different">
<header class="fixed-header">MY PARENT HAS NO TRANSFORM</header>
<ul>
<li>Scroll Me</li>
<li>Me Too</li>
<li>I want to go up and down</li>
</ul>
</div>

<div class="moving-article">
<header class="fixed-header">FIXED HEADER</header>
<ul>
<li>Scroll Me</li>
<li>Me Too</li>
<li>I want to go up and down</li>
</ul>
</div>

<div class="moving-article">
<header class="fixed-header">FIXED HEADER</header>
<ul>
<li>Scroll Me</li>
<li>Me Too</li>
<li>I want to go up and down</li>
</ul>
</div>

<div class="moving-article">
<header class="fixed-header">FIXED HEADER</header>
<ul>
<li>Scroll Me</li>
<li>Me Too</li>
<li>I want to go up and down</li>
</ul>
</div>

<div class="moving-article">
<header class="fixed-header">FIXED HEADER</header>
<ul>
<li>Scroll Me</li>
<li>Me Too</li>
<li>I want to go up and down</li>
</ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Codystar:300);

/* 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);
}

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




/* presentation */

* { 
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Codystar', cursive;
    color: #fff;
 }
.moving-article {
  -webkit-font-smoothing: subpixel-antialiased; /* avoid font get thinner */
  border: solid 10px #fff;
  height: 150px;
  overflow: scroll;
  position: relative;
}
header {
background: rgba(0,0,0,0.5);
width: 100%;
text-align: center;
line-height: 40px;
}
ul {
  }
li { 
  background: #ff00ff;
  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: #cc00cc;  
}
li{color: black;}
.different {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
}

.different header {
    top: auto;
    left: auto;
}