JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<div class="scroll">
  <div class="scrollin">
    <div class="cap"></div>
  </div>
</div>
<div class="scroll">
  <div class="scrollin">
    <div class="cap"></div>
  </div>
</div>
<div class="scroll">
  <div class="scrollin"></div>
</div>

CSS

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  background: #000;
  justify-content: space-between;
}

body * { flex: 0 1 30%; }

.scroll {
  --height: 80vh;
  height: var(--height);
  overflow: scroll;
  background: #fff;
}

.scrollin {
  display: flex;
  flex-flow: column;
}

.scrollin::before,
.scrollin::after {
  content: '';
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  order: 2;
}

.scroll:nth-child(1) .cap {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  flex: 0 0 calc(var(--height) / 4);
  background-color: #f008;
  order: 1;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.scrollin::before {
  height: calc(var(--height) * 2);
}

.scroll:nth-child(2) .cap {
  flex: 0 0 var(--height);
  order: 1;
  margin-bottom: calc(var(--height)  * -1);
  background-color: #00f8;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.scroll:nth-child(2) .scrollin::before {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.scroll:nth-child(2) .scrollin::after {
  height: var(--height);
  visibility: hidden;
}

.scroll:nth-child(3) {
  background: lightblue;
}

.scroll:nth-child(3) .scrollin {
  filter: blur(1px);
}













.scrollin::before {
  content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere sapiente deleniti possimus eaque sunt dolorem dolor debitis minima, facilis nostrum, numquam culpa neque nihil, maxime fugiat. Quod necessitatibus, sed cumque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere sapiente deleniti possimus eaque sunt dolorem dolor debitis minima, facilis nostrum, numquam culpa neque nihil, maxime fugiat. Quod necessitatibus, sed cumque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere sapiente deleniti possimus eaque sunt dolorem dolor debitis minima, facilis nostrum, numquam culpa neque nihil, maxime fugiat. Quod necessitatibus, sed cumque! Lorem ipsum dolor sit amet, consectetur adipisicing elit....