LeDDGroup/scroll-utility

body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 1000vh;
  width: 500vh;
  background: grey;
}

#scrollable {
  color: white;
  background: black;
  position: absolute;
  top: 30%;
  left: 20%;
  height: 80vh;
  width: 80vw;
  overflow: scroll;
}
#scrollable::after {
  content: "";
  position: absolute;
  width: 1000vw;
  height: 1000vh;
}

#some-element,
#element {
  color: black;
  background: white;
  position: absolute;
  height: 50vh;
  width: 50vw;
}
#some-element {
  color: white;
  background: black;
  top: 60%;
  left: 40%;
}
#element {
  top: 60%;
  left: 60%;
}

body > h1 {
  position: sticky;
  z-index: 2;
  width: 100vw;
  top: 10vh;
  left: 40vw;
}

#scrollable > h1 {
  position: sticky;
  z-index: 1;
  width: 50vw;
  top: 10%;
  left: 20%;
}