JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.3/headroom.min.js"></script>
<div id="branding"></div>

<div id="masthead"></div>

<div id="sidebar"></div>

<div id="main">

  <div id="breadcrumbs"></div>
  
  <div id="headline"></div>
</div>

CSS

#branding {
  width: 320px;
  height: 50px;
  position: fixed;
  top: 0;
  left: 8px;
  right: 0;
  background: blue;
}

#sidebar {
  float: left;
  background: #222;
  width: 320px;
  height: 3500px;
}

#masthead {
  background: #ccc;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 328px;
  right: 0;
  transition: transform 0.5s ease;
}

#breadcrumbs {
  background: red;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 50px;
  left: 328px;
  right: 0;
  transition: transform 0.5s ease;
}

#headline {
  background: #444;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 100px;
  left: 328px;
  right: 0;
  transition: transform 0.5s ease;
}


/*******************/

#masthead.slideDown {
    transform: translateY(0);
}
#masthead.slideUp {
    transform: translateY(-110%);
}

/* breadcrumbs */

#breadcrumbs.slideDown {
    transform: translateY(0);
}
#breadcrumbs.slideUp {
    transform: translateY(-210%);
}

/* headline */

#headline.slideDown {
    transform: translateY(0);
}
#headline.slideUp {
    transform: translateY(-310%);
}

#sidebar {
	z-index: 99999998!important;
}

JavaScript

var masthead = document.getElementById("masthead");
		var breadcrumbs = document.getElementById("breadcrumbs");
		var headline = document.getElementById("headline");
		// construct an instance of Headroom, passing the element
		var headroom1  = new Headroom(masthead, {
			"offset": 100,
			"tolerance": {
				"up" : 55,
				"down" : 5
			},
			"classes": {
				"initial": "main-navigation",
				"pinned": "slideDown",
				"unpinned": "slideUp"
			}
			});
		var headroom2  = new Headroom(breadcrumbs, {
			"offset": 100,
			"tolerance": {
				"up" : 55,
				"down" : 5
			},
			"classes": {
				"initial": "main-navigation",
				"pinned": "slideDown",
				"unpinned": "slideUp"
			}
			});
		var headroom3  = new Headroom(headline, {
			"offset": 100,
			"tolerance": {
				"up" : 55,
				"down" : 5
			},
			"classes": {
				"initial": "main-navigation",
				"pinned": "slideDown",
				"unpinned": "slideUp"
			}
			});
		// initialise
		headroom1.init();
		headroom2.init();
		headroom3.init();