JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navbar" id='nav'>
	<ul>
	  <li><a href="" id="navi">Home</a></li>
	  <li><a href="">News</a></li>
	  <li><a href="">Gallery</a></li>
    <li>Home</li>
	  <li>News</li>
	  <li>Gallery</li>
	</ul>
</div>

<script type="text/javascript">
	var  nav = document.getElementById('nav');
	window.onscroll = function(){
		if (window.pageYOffset >100) {
			nav.style.background = "#FFF";
			nav.style.color = "#000";
			nav.style.marginTop = "-20px";
			nav.style.borderBottom = "1px solid #E5E5E5";
			nav.style.boxShadow = "0 1px 2px rgba(0,0,0,0.05)";
		} else {
			nav.style.background = "transparent";
			nav.style.color = "#FFF";
			nav.style.marginTop = "0px";
			nav.style.border = "none";
			nav.style.boxShadow = "none";
		}
	}
</script>
<div class="section1"></div>
<div class="section2"></div>

CSS

*{
  margin: 0 auto;
}

.navbar {
	width: 100%;
	position: fixed;
	transition: 1s;
	color: #FFF;
}

.navbar ul li {
	display: inline-block;
	padding: 35px 30px 20px 0px;
	font-family: sans-serif;
	font-size: 15px;
}

.section1 {
	width: 100%;
	height: 100vh;
	background: grey;
}

.section2 {
	width: 100%;
	height: 100vh;
	background: black;
}