JSFiddle - React, Tailwind, and code Playground

by evild70

HTML

<div class="fixed">
FIXED HEADER
</div>

<div class="wrapper">
   <div class="sticky">
        STICKY HEADER
   </div>
   
   <div>
     my content<br />
   some more content
   some more content
   some more content   
   some more content
   some more content
   some more content
   some more content   
   some more content
   some more content
   some more content
   some more content   
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   </div>
</div>

<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>

SCSS

body {
margin: 0 10px;
}
.fixed {
  position: fixed;
  background: #ffc;
  top: 0;
  right: 0;
  left: 0;
  padding: 10px 10px 0;
  height: 30px;
  z-index: 1;
}

.wrapper {
  padding-top: 40px;
  width: 500px;
}

.sticky {
  background: #fcf;
  position: sticky;
  top: 40px;
}