JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="page-container">
    
    <div class="navbar">
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
        </ul>
    </div>
    
    <div class="hero-image">
    </div>
    
    <div class="subnav">
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
        </ul>
    </div>
    
</div>

SCSS

* {
    box-sizing: border-box;
}

.page-container {
    height: 2000px;
    width: 100%;
}

.navbar {
	position: fixed;
    height: 80px;
	width: 100%;
	top: 0;
    background-color: blue;
    text-align: center;
    padding: 15px;    
    z-index: 2;
    
    li {
        list-style-type: none;
        display: inline;
        color: white;
        padding: 0 10px;
    }
}

.hero-image {
    background: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
    width: 100%;
    position: relative;
    background-position: center center;
    background-size: cover;
    z-index: 1;
    margin-top: 80px;
}

.subnav {
    background-color: red;
    text-align: center;
    height: 80px;
    padding: 15px;
    width: 100%;
    z-index: 2;
    left: 0;
    
    li {
        list-style-type: none;
        display: inline;
        color: white;
        margin: 0 10px;
    }
}

JavaScript

$( document ).ready(function() {   

    // Resize hero image to size of viewport minus header and subnav
    $(window).bind("resize", function() {
      var windowHeight = $(window).height();
      var mainNav = $('.navbar').outerHeight(true);
      var navPlusSubnav = $('.subnav').outerHeight(true);
    
      $('.hero-image').height(windowHeight - navPlusSubnav - mainNav);
    
    }).trigger("resize");
    
    // Make sub-nav stick after scrolling past
    var windowH = $(window).height();
    var stickToBot = windowH - $('.subnav').outerHeight(true);
      
    $('.subnav').css({'top': stickToBot + 'px'});
     
    $(window).scroll(function() {
      var scrollVal = $(this).scrollTop();
      if ( scrollVal > stickToBot - $('.navbar').outerHeight(true) ) {
          $('.subnav').css({'position':'fixed','top' :'80px'});
      } else {
          $('.subnav').css({'position':'absolute','top': stickToBot +'px'});
      }
    });
    
});

$( window ).resize(function() {
    
      var windowH = $(window).height();
      var stickToBot = windowH - $('.subnav').outerHeight(true);
        
      var scrollVal = $(this).scrollTop();
      if ( scrollVal > stickToBot - $('.navbar').outerHeight(true) ) {
          $('.subnav').css({'position':'fixed','top' :'80px'});
      } else {
          $('.subnav').css({'position':'absolute','top': stickToBot +'px'});
      }
    
});