JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>

  <div class='banner'></div>

  <div class='timeline'>
    <div id='timeline-header' class='timeline-header grid'>
      <span class="grid-cell">1997</span>
      <span class="grid-cell">2001</span>
      <span class="grid-cell">2003</span>
      <span class="grid-cell">2004</span>
      <span class="grid-cell">2007</span>
      <span class="grid-cell">2010</span>
      <span class="grid-cell">2011</span>
      <span class="grid-cell">2012</span>
      <span class="grid-cell">2013</span>
      <span class="grid-cell">2015</span>
      <span class="grid-cell">2016</span>
      <span class="grid-cell">2017</span>
      <span class="grid-cell">2018</span>
    </div>

    <div class='timeline-content-top grid'>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
    </div>

    <div class='timeline-content-bottom grid'>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
      <div class="box grid-cell"></div>
    </div>
  </div>

  <div class='more-things'></div>

</div>

SCSS

html, body{
  padding: 0;
  margin: 0;
}

.banner{
  background-image: url(https://images.unsplash.com/photo-1523002010469-ea85cb48674b?w=1000);
  height: 300px;
  background-size: cover;
  background-position-y: 50%;
}

.grid{
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 10px;
  padding: 10px 20px;
  width: min-content;
}

.grid-cell{
  min-width: 200px;
}

.timeline{
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
}

.timeline-header{
  position: relative;
  border-bottom: 1px solid #CCC;
  background-color: #FFFFFF;
}

.timeline-header.sticky{
  position: relative;
}

.box{
  background-color: #000000;
  height: 200px;
}

.timeline-content-bottom{
  padding-top: 0;
}

.timeline-content-bottom .box{
  background-color: #A9AF92;
}

.more-things{
  height: 1000px;
  background-color: #CCCCCC;
  background-image: url(https://images.unsplash.com/photo-1515876879333-013aa5ea1472?w=1000);
  background-size: cover;
}

JavaScript

document.addEventListener("scroll", onScroll);

const timelineHeader = document.getElementById('timeline-header');
const timelineHeaderRect = timelineHeader.getBoundingClientRect();

function onScroll(){
	const timelineHeaderTop = timelineHeaderRect.top - window.pageYOffset;
	  
  if(timelineHeaderTop < 0){
    timelineHeader.style.top = `${-timelineHeaderTop}px`;
  }else{
    timelineHeader.style.top = 0;
  }
}