JSFiddle - React, Tailwind, and code Playground

by Teceract

HTML

<br><br><br>
<nav id="main-nav" class="primary-nav" role="navigation">
<div class="wrap">
      <ul id="menu-menu-2" class="nav-menu clearfix">
      <li class="menu-item"><a href="">menu 1</a></li>
      <li class="menu-item"><a href="">menu 2</a></li>
      <li class="menu-item"><a href="">menu 3</a></li>
</ul>
</nav>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS

.primary-nav {
	position: relative;
	width: 96%;
	margin: 0 auto;
	background-color: #111;
	color: rgba(255,255,255,.87);
	text-align: center;
	z-index: 20;
}

.primary-nav .wrap {width: 100%;}

.primary-nav.sticky-nav .wrap {width: 96%; max-width: 980px; margin: 0 auto;}

.primary-nav ul.nav-menu,
.primary-nav div.nav-menu > ul {
	position: relative;
	margin: 0 -2px;
	padding: 0;
	list-style: none;
	display: block;
	width: 100%;
	z-index: 9;
	font-size: 0;
}

.primary-nav ul {margin: 0; text-indent: 0;}
.primary-nav li {display: inline-block; font-size: 13px; margin: 0; position: relative;}

.nav-menu > li {margin: 0px 2px;}

.nav-menu > li > a {
	display: block;
	padding: 12px;
	color: rgba(255,255,255,.87);
	font-size: 13px;
	line-height: 1.846153846;
	letter-spacing: .25px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	
	-webkit-transition: .2s;
	-moz-transition: .2s;
	-o-transition: .2s;
	transition: .2s;
}

.inline-nav .nav-menu > li > a {
	color: #757575;
	text-transform: uppercase;
	font-weight: 400;
}

ul.nav-menu li a span {
	display: block;
	font-size: 12px;
}

.primary-nav li:hover > a {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.1);
}

.sticky-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	z-index: 99;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.top-nav.sticky-nav {
	z-index: 100;
}

JavaScript

jQuery(document).ready(function ($) {
var ss_custom = {"main_bar_sticky":"true"};
	function animateNav() {
		var win_scroll = $(window).scrollTop(),
			win_height = $(window).height(),
			main_nav = $('#main-nav'),
			main_nav_offset = '',
			scroll_by = 120;

		if (ss_custom && ss_custom.header_style == 'slim') {main_nav = $('.header-slim');}
		
		main_nav_offset = $(main_nav).outerHeight();

		if (ss_custom && ss_custom.main_bar_sticky && !ss_custom.top_bar_sticky) {
			if (win_scroll > scroll_by) {
				$(main_nav).addClass('sticky-nav');
				$('.primary').css({"margin-top": main_nav_offset});
				if (ss_custom && ss_custom.header_style == 'slim') {
					$('.menu-drop').css({'max-height': win_height - main_nav_offset});
				} else {
					$('.menu-drop').css({'max-height': win_height - $('.menu-button').outerHeight()});
				}
			} else {
				$(main_nav).removeClass('sticky-nav');
				$('.primary').css({"margin-top": 0});
				$('.menu-drop').css({'max-height': '100%'});
			}
		}
	}

	animateNav();
	$(window).on('load scroll', function () {animateNav();});

});