JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<header>
    <div class="void"></div>
    <nav class="menu">
    </nav>
</header>
<div class="content">
    <!-- Picture displayed twice for the example only -->
    <!-- to be sure everyone gets scollable page-->
    <img src="https://farm8.staticflickr.com/7632/16990947835_3894284fd8_b.jpg">
    <img src="https://farm8.staticflickr.com/7632/16990947835_3894284fd8_b.jpg">
</div>

CSS

body{
	  width:100%;
	  height:100%;
	  margin:0px;
	  padding:0px;
    background: #ccc;
}

header{
	  position:relative;
	  width:100%;
	  background: #fff;
	  z-index:1;
    height:146px;
}

.void{
	  position:relative;
	  width:100%;
		height:100px;
}

.menu{
	  position:relative;
	  width:100%;
  	height:54px;
    background:#aaa;
}

.fixed{
    position: fixed;
    left:0px;
    top: 0px;
}

img{
  width:100%
}

JavaScript

// Sticky header menu

$(window).scroll(function() {
    if ($(document).scrollTop() > 92){
		    if (!$('.fixed').length){$('.menu').addClass('fixed');}
		} 
		else {
			  if ($('.fixed').length){$('.menu').removeClass('fixed');} 			       
    }     
});

// Parallax of page on scroll

var iCurScrollPos = 0;
$(window).scroll(function () {
    iCurScrollPos = $(this).scrollTop();
    $('.content').css('margin-top',-iCurScrollPos*1.2+'px')
});