JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <h1>Title1</h1>
</div>
<div class="block">
  <h1>Title2</h1>
  <div style="height: 400px"></div>
  <div class="bottom">sticky bottom</div>
</div>
<div class="block">
  <h1>Title3</h1>
</div>

SCSS

.block {
  height: 500px;
  border: 1px solid #ccc;
  h1 {
    position: sticky;
    top: 0;
    margin: 0;
    background: #ccc;
  }
  .bottom {
    position: sticky;
    bottom: 20px;
    background: #fff;
  }
}