JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
	<div class="header">
		Header
	</div>
	<div class="nav sticky">
		Navigation
	</div>
	<div class="content">
		<p>Candy canes tart pie biscuit. Cupcake liquorice cake dessert 
tootsie roll applicake pastry. Soufflé chocolate bar macaroon powder 
macaroon fruitcake donut. Apple pie biscuit wypas toffee caramels wafer 
lollipop cotton candy. Sweet roll apple pie chupa chups tart bonbon. 
Croissant carrot cake gummi bears. Sweet roll wypas macaroon fruitcake 
gummi bears halvah tootsie roll faworki. Wypas halvah dessert carrot 
cake candy canes tiramisu jelly beans gingerbread. Sweet tootsie roll 
pie wypas macaroon jelly-o oat cake sesame snaps dessert. Icing tootsie 
roll gummies topping. Chocolate chocolate cake marshmallow jujubes. 
Liquorice lemon drops tart. Jujubes gingerbread toffee candy canes.</p>
		
		<p>Cheesecake gummies applicake cotton candy dragée wafer candy canes 
sugar plum sweet roll. Applicake gummi bears wafer bonbon tiramisu 
wypas. Chocolate cake sweet roll faworki jujubes dragée liquorice 
chocolate. Sugar plum halvah marzipan apple pie. Tootsie roll faworki 
bonbon candy canes croissant topping jelly-o tootsie roll topping. Lemon
 drops tiramisu chocolate. Bonbon lemon drops brownie danish. Bear claw 
jelly soufflé brownie dragée wafer chocolate sesame snaps. Apple pie 
donut jelly-o chupa chups croissant jelly-o powder gingerbread 
chocolate. Lollipop cupcake sweet roll chocolate cake bear claw sweet 
roll powder applicake oat cake. Jujubes chupa chups jujubes liquorice 
danish bonbon apple pie topping. Lollipop jujubes halvah carrot cake 
jelly-o cookie.</p>

		<p>Powder marshmallow bear claw topping. Chocolate bar icing brownie 
jujubes pie croissant chupa chups. Tootsie roll fruitcake candy. Tootsie
 roll jelly-o caramels candy. Gingerbread chocolate cake lemon drops. 
Pie toffee chupa chups brownie marshmallow cupcake croissant bear claw 
pudding. Ice cream oat cake marshmallow. Chocolate chocolate oat cake...

CSS

body {
	padding: 0; 
     height: 622px;
}
.header {
	padding: 50px 0;
	background-color: #333;
}
.nav {
	padding: 25px 0;
	background-color: slategrey;
	position: -webkit-sticky;
	top: 45px;
	z-index: 1;
}
.header, .nav {
	text-align: center;
	color: #fff;
}
.content {
	width: 600px;
	margin: 10px auto 100px;
}
.sticky {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 100;
	border-top: 0;
}

JavaScript

$(document).ready(function() {
    var height = $('.nav').outerHeight();
    $(window).scroll(function() {
            if($(this).scrollTop() > height)
            {
                $('.nav').css('position','fixed');
                $('body').css('padding-bottom',height+'px');
            }
            else if($(this).scrollTop() <= height)
            {
                $('.nav').css('position','static');
                $('body').css('padding-bottom','0');
            }
    });
    $(window).scroll();
});