JSFiddle - React, Tailwind, and code Playground

HTML

<header class="stick">
	<h1>Header</h1>
</header>
<main>
	<h2>Content</h2>
</main>
<footer>
	<h3>Footer</h3>
</footer>

CSS

*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}
html, body{
	height: 100%;
}
h1,h2,h3{
	color:#ccc;
	display: block;
	text-align: center;
}
header{
	background-color:blue;
	z-index: 1;
}

main{
	height: 100%;
	background-color: red;
	position: relative;
	z-index: 2;
	margin-top: 100vh;
}

footer{
	height: 100%;
	background-color: green;
	position: relative;
	z-index: 3;
	margin-top: 200vh;
}

.stick {
    position:fixed;
    height: 100%;
    width: 100%;
    top:0px;
    margin-top: 0;
}

JavaScript

$(function(){
	$(window).load(function(){ // On load
		$('main').css({'height':($(window).height())});
		$('main').css({'margin-top':($(window).height())});
	});
	$(window).resize(function(){ // On resize
		$('main').css({'height':($(window).height())});
	});
});


$(document).ready(function() {
    var s = $("main");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos > $(window).height()) {
            s.addClass("stick");
        } else {
            s.removeClass("stick");
        }
    });
});