test.css

body,
html {
  color: white;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}
main {
  counter-reset: div;
  display: flex;
  height: 100%;
  justify-content: space-between;
  max-width: 100vw;
  min-height: 2000px;
  position: absolute;
  top: 400px;
  width: 100%;
}
.child {
  padding: 1rem 0;
  text-indent: 1rem;
  width: 100%;
}
.parent {
  height: 300px;
  position: relative;
  width: 100%;
}
.parent:nth-child(odd) {
  background: tan;
}
.parent:nth-child(odd) .child {
  background-color: red;
}
.parent:nth-child(even) {
  background: aqua;
}
.parent:nth-child(even) .child {
  background-color: green;
}
.parent:before {
  counter-increment: div;
  content: 'Parent 'counter(div);
  left: 1rem;
  position: absolute;
  top: 1rem;
  z-index: 2;
}
.child.js-is-sticky {
  top: 0;
}
.child.js-is-stuck {
  bottom: 0;
}