JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<body>


<ul class="navbar" id="navbar">
    <li>
        <a href="#">Item 1</a>
    </li>
    <li>
        <a href="#">Item 2</a>
    </li>
    <li>
        <a href="#">Item 3</a>
    </li>
    <li>
        <a href="#">Item 4</a>
    </li>
    <li>
        <a href="#">Item 5</a>
    </li>
    <li class="navbar-icon">
        <a href="javascript:void(0);" style="font-size:15px;" onclick="menuToggle()"><i class="ion-navicon"></i></a>
    </li>
</ul>
    <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 />
</body>

CSS

.navbar-fixed-top {
  position: fixed !important;
  top: 0;
  width: 100%;
}
ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #27ae60;
    text-align:center;
    z-index: 99;
    position: relative;
}
ul.navbar li {
    display: inline;
}
ul.navbar li:not(:nth-last-child(2)) {
    border-right: 1px solid #079342;
}
ul.navbar li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 20px;
    text-decoration: none;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    font-size: 100%;
    text-transform: uppercase;
    font-weight: 300;
}
ul.navbar li a:hover { 
    color: #e6e6e6 !important;
}
ul.navbar li.navbar-icon {display: none;}
@media screen and (max-width:680px) {
  ul.navbar{text-align:left;}
  ul.navbar li:not(:first-child) {display: none;}
  ul.navbar li.navbar-icon {
    float: right;
    padding-bottom: -5px;
    display: inline-block;
  }
  ul.navbar li.navbar-icon a {
    padding-bottom: 17px;
  }
}
@media screen and (max-width:680px) {
    ul.navbar.navbar-responsive {
        position: relative;
    }
    ul.navbar.navbar-responsive li.navbar-icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.navbar.navbar-responsive li {
        float: none;
        display: inline;
    }
    ul.navbar.navbar-responsive li a {
        display: block;
        text-align: left;
    }
    ul.navbar li:first-child {
        border-right: none;
    }
}

JavaScript

$(function(){
			$(window).scroll(function ()
			{
				if ($(this).scrollTop() > 60)
				{
					$('#navbar').addClass('navbar-fixed-top', 500);

				} else {
						$('#navbar').removeClass('navbar-fixed-top', 500);
					
				}
			});
      
      });