JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="nofixed">
    <a href="#">Menu Item</a>
    <a href="#">Menu Item</a>
    <a href="#">Menu Item</a>
</nav>


<span>0</span>
<section>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore beatae mollitia impedit aut enim eveniet ullam facere eaque ratione repellendus! Ipsa tempora hic sequi quisquam dolorum cumque commodi illo animi debitis veniam earum beatae laudantium quia velit tenetur. Voluptatem quo suscipit quas sequi labore consectetur ullam velit. Autem illum quae mollitia fugit nesciunt magni tempore corporis earum quam alias veniam saepe commodi esse explicabo consectetur incidunt dolor sint eum non laboriosam? Consequuntur esse soluta aliquam reprehenderit voluptates nobis debitis placeat dicta. Laborum aperiam sunt vitae voluptatibus autem dolor omnis reiciendis quam molestias ex rerum iste enim voluptas veritatis nobis velit optio recusandae repudiandae incidunt excepturi atque ducimus ad ipsa nisi ullam id error. Aliquid maiores labore velit maxime fugiat reiciendis alias. Vitae fuga quo numquam porro odit officiis nihil illo assumenda culpa minus. Placeat est obcaecati molestias voluptate a voluptatibus id nulla. Asperiores harum aspernatur quia reprehenderit rerum expedita distinctio ducimus neque impedit sint itaque odio perferendis incidunt maiores voluptatibus minima dolores quas perspiciatis labore iusto dolor ea sed? Consectetur culpa asperiores sequi labore commodi aliquid velit natus? Deleniti vel accusamus libero debitis ut ipsam neque quasi adipisci dicta hic ipsa sint fuga vero quas atque corporis aliquid reiciendis? Aspernatur at maxime cumque error reprehenderit doloremque optio similique est quis unde deserunt eveniet minus vitae sed in excepturi veniam eius eum labore voluptatum iste animi amet cum voluptatem quos molestias placeat fuga! Architecto culpa iusto cum voluptatum iste pariatur aut. Enim eligendi optio atque possimus commodi ducimus consectetur quibusdam officiis ab expedita eaque omnis...

CSS

body {
    height: 2000px;
    margin: 0;
    padding: 0;
}
span {
    position: fixed;
    top: 200px;
    left: 20px;
}
section {
    width: 600px;
    margin: 0 auto;
}

nav {
    background-color: rgba(229, 127, 127, 0.95);
    text-align: center;
    width: 100%;
}
a {
    font-size: 18px;
    text-transform: uppercase;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    padding: 20px 15px;
}
.nofixed,
.hidden {
    position: absolute;
}
.hidden {
    transform: translateY(-370px);
}
.fixed {
    position: fixed;
    transform: translateY(0);
    transition: transform 0.9s;
}

JavaScript

// fixed menu

	var navFixed = $("nav.nofixed"),
        navHeight = $('nav').height();

	if ($(window).scrollTop()) {
		navFixed.addClass("fixed").removeClass("nofixed");
	};

    
	if (navFixed.length) {
		$(window).scroll(function(){
			var scroll = $(window).scrollTop();
            console.log($('span').text(scroll));
            
			if (scroll < navHeight + 50) {
				navFixed.addClass("nofixed");
				navFixed.removeClass("fixed hidden");
			};
			if (scroll > navHeight){
				navFixed.addClass("hidden");
			};
			if (scroll > navHeight + 50){
				navFixed.addClass("fixed");
				navFixed.removeClass("nofixed");
			};
            
		});
	};