JSFiddle - React, Tailwind, and code Playground

HTML

<div class="space"></div>
<div class="sticky">body sticky</div>
<div class="space"></div>

<div class="scroller">
  <div class="space"></div>
  <div class="sticky">fixed sticky</div>
  <div class="space"></div>
</div>

<div class="scroller scroller-with-inner">
  <div class="inner">
    <div class="space"></div>
    <div class="sticky">fixed sticky inner</div>
    <div class="space"></div>
  </div>
</div>

CSS

html, body {
  height: 100%;
}
html {
  overflow: hidden;
}
body {
  margin: 0 0 0 calc(100% / 3 * 2);
}
body,
.scroller {
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: scroll;
  padding: 5vw;
  text-align: center;
}

.scroller {
  position: fixed;
  top: 0;
  width: calc(100% / 3);
  left: calc(100% / 3);
  bottom: 0;
}
.scroller-with-inner {
  left: 0;
  padding: 0;
}

.inner {
  padding: 5vw;
}

.space {
  height: 200vh;
  background-image: repeating-linear-gradient(to bottom, #fbd 0vh, #fbd 20vh, #f9f 20vh, #f9f 40vh);
}

.sticky {
  background-color: hotpink;
  padding: 25px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}