在.slide-under上的position: sticky
.slide-over上的z-index: 10;

.a {
  --bg: gray;
}

.b {
  --bg: navy;
}

.c {
  --bg: brown;
}

.d {
  --bg: white;
}

.container>div,
.slide-under>div,
.slide-over>div {
  width: 100%;
  height: 800px;
  background-color: var(--bg);
}

.slide-under {
  position: sticky;
  top: 0;
}

.slide-over {
  position: relative;
  z-index: 10;
  box-shadow: 0 0 50px black;
}

<div class="container">
  <div class="a"></div>
</div>
<div class="slide-under">
  <div class="b">
    some text......
  </div>
</div>
<div class="slide-over">
  <div class="c"></div>
  <div class="d"></div>
</div>