JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div class="wrapper">
  <div class="sticky-wrapper">
     <div class="left">ssssss</div> 
     
  </div>
  <!-- <div class="left">ssssss</div> --> 
   
   <div class="right"></div>
</div>

CSS

.wrapper{
  height: 150vh;
}

.sticky-wrapper{
  height: 80vh;
  overflow-y: scroll;
  width: 20vh;
   position:sticky;
}

.left{
  height: 1800vh;
  /* position:sticky; */
  background: red;
  width: 20vh;
  top: 0;
}