JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="head"> i </div>
<div id="subHead"> can </div>
<div id="content">  haz </div><

CSS

#head, #subHead{
    position: fixed;           
    height: 80px;    
    width: 100%;
    display: block;
    background: #c00;
    left: 0;
    top: 0;
    z-index: 10;
}

#subHead{
    z-index: 4;
    background: #cd0; 
    top: 80px;
}

#content{
    position: relative;
    z-index: 6;
    height: 1000px;
    background: #eee;
    margin-top: 160px;
}

JavaScript

$(window).bind('scroll', function(){  
  $('#subHead').css('top', ($('#head').height() - $('body').scrollTop() / 4));
});