SOURCE

<div class="good-warp">
	<div class="timeline-warp" id="timelineWarp">
		<div class="timeline-item">
			<span class="timeline-text" id="dailyOrderNum">今天共5个订单</span>
	    </div>
	    <div class="timeline-item">
	        <span class="timeline-text" id="timeline">2021年06月25日</span>
	    </div>
	</div>
    <div class="good-card">

    </div>
    <div class="good-card">
    
    </div>
    <div class="good-card">
    
    </div>
    <div class="good-card">
        
	<div class="timeline-warp" id="timelineWarp">
		<div class="timeline-item">
			<span class="timeline-text" id="dailyOrderNum">今天共5个订单</span>
	    </div>
	    <div class="timeline-item">
	        <span class="timeline-text" id="timeline">2021年06月25日</span>
	    </div>
	</div>
    </div>
    <div class="good-card">
    
    </div>
    <div class="good-card">
    
    </div>
</div>

.good-warp {
  width: 400px;
  height: 100%;
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  padding: 0 17px;
  overflow-y: scroll;
}
.good-warp .timeline-warp {
  height: 20px;
  width: 100%;
  padding: 0 12px 0 12px;
  position: sticky;
  display: flex;
  flex-flow: row nowrap;
}

.good-warp .good-card {
  height: 220px;
  width: 100%;
  position: sticky;
  display: flex;
  flex-flow: column nowrap;
  background-color: darkorange;
  padding: 0;
  margin: 10px 0;
}

.good-warp .good-card:nth-child(2n) {
    background-color: rebeccapurple;
}
.good-warp .timeline-warp .timeline-item {
  height: 20px;
  margin: 0;
}
.good-warp .timeline-warp .timeline-item span {
  height: 20px;
  margin: 0;
  font-size: 14px;
  color: #80848f;
}

.good-warp .timeline-warp .timeline-item span#timeline {
    font-style: italic;
}