JSFiddle - React, Tailwind, and code Playground

HTML

<div id="head1"> &nbsp;</div>
<div id="subHead"> can </div>
<div id="content">  haz </div>

CSS

#subHead{
    position: fixed;           
    height: 80px;    
    display: block;
    background: #c00;
    z-index: 10;
}
#content{
    position: relative;
    z-index: 86;
    height: 1000px;
    background: #eee;
    margin-top: 80px;
}

JavaScript

window.onscroll = function(ev){
  var subHead = document.getElementById('subHead'),
      topHeight = document.getElementById('head1').offsetHeight;

  subHead.style.top = (topHeight - document.body.scrollTop / 4) + 'px';
};