<div class="scroll">
  <div class="parent">
    <b class="static">.static</b>
    <b class="sticky">.sticky</b>
    <b class="fixed">.fixed</b>
  </div>
  <div class="parent">
    <b class="static">.static</b>
    <b class="sticky">.sticky</b>
  </div>
  <br><br><br><br><br><br><br><br><br><br>
</div>
<b class="sticky">.sticky</b>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

.scroll {
  display: inline-block;
  width: 200px;
  height: 400px;
  overflow: auto;
  padding: 0 4px;
  vertical-align: middle;
  border: 4px solid #000;
}
.parent {
  height: 300px;
  margin: 4px 0 200px;
  border: 4px solid #666;
}
.static {
    position: static;
    background: gray;
}
@supports (position: sticky) or (position: -webkit-sticky) {
  .sticky {
      position: sticky;
      top: 4px;
      background: red;
  }
}
.fixed {
    position: fixed;
    top: 20px;
    left: 116px;
    background: blue;
}
body {
  color: #fff;
  background-image: linear-gradient(#fff 12px, #eee 12px, #eee 24px);
  background-size: 100% 24px;
}