JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu">
    <a href="">123</a>
    <a href="">456</a>
    <a href="">789</a>
</nav>

CSS

body {
    height: 2000px;
    margin: 0;
    padding: 0;
}
.menu {
    background: #AAA;
    box-sizing: border-box;
    margin-top: 400px;
    padding: 20px;
}
.menu.fixed {
    left: 0;
    margin-top: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

JavaScript

(function() {
	var menu = document.querySelector('.menu'),
		menuIsFixed = false,
		menuMaxTop = 400;
	
	window.addEventListener('scroll', function() {
		if(this.pageYOffset >= menuMaxTop != menuIsFixed) {
			menuIsFixed = !menuIsFixed;
			menu.classList[menuIsFixed ? 'add' : 'remove']('fixed');
		}
	});
})();