<div class="container">
  <div class="box1 d-flex">
    <div class="child-box"></div>
    <div class="sticky-box"></div>
    <div class="child-box"></div>
  </div>
  <div class="box2"></div>
</div>
.container{
  width: 100%;
  margin: 0 auto;
}

.d-flex{
  display: flex;
}

.box1{
  width: 1000px;
  height: 500px;
  border-bottom: 5px solid #000;
}

.box2{
  width: 1000px;
  height: 1000px;
  background: orange;
}

.child-box{
  width: 100px;
  height: 100px;
  background: rgba(0, 0, 0, 0.5);
  margin: 10px;
}

.sticky-box{
  width: 100px;
  height: 100px;
  position: sticky;
  top: 0;
  background: #000;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.